Fixing issue and improved network performance and added loader etc..

components/FilterPanel/index.js

@@ -31,14 +31,8 @@ const filters = [
   { name: 'Travel', icon: abroad, add: addTravel, remove: removeTravel },
 ]
 
-//{ name: 'Travel', icon: abroad, add: addTravel, remove: removeTravel },
-
 const HeaderContainer = styled.div`
-  padding-top: 10px;
-  background-color: #f2f2f2;
-  display: grid;
-  grid-template-rows: 7% 93%;
-  overflow: auto;
+  margin: 30px 0px;
   font-family: 'Lato', sans-serif;
   color: #7c7a7a;
   font-weight: bold;
@@ -51,9 +45,6 @@ const HeaderContainer = styled.div`
 `
 
 const FilterMenuContainer = styled.div`
-  display: grid;
-  grid-template-rows: 10% 10% 10% 10% 60%;
-  overflow: auto;
   font-family: 'Lato', sans-serif;
   color: #7c7a7a;
   font-weight: bold;
@@ -64,30 +55,31 @@ const FilterMenuContainer = styled.div`
   }
 `
 
-const FilterCategory = ({ filter, onClick, selected }) => {
-  const FilterContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-evenly;
-    height: '20vh';
-    user-select: none;
-    background-color: ${props => (props.selected ? '#d6d6d6' : '#F2F2F2')};
-    transition: all 0.2s ease-out;
-    cursor: pointer;
-    &:hover {
-      background-color: #d7d7d7;
-    }
-  `
-  const FilterName = styled.div`
-    text-transform: uppercase;
-    font-size: 11px;
-  `
-
-  const FilterIcon = styled.img`
-    width: 40px;
-  `
+const FilterContainer = styled.div`
+  padding: 5px 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  height: '20vh';
+  background-color: ${props => (props.selected ? '#d7d7d7' : 'transparent')};
+  transition: all 0.2s ease-out;
+  cursor: pointer;
+  &:hover {
+    background-color: #d7d7d7;
+  }
+`
+
+const FilterName = styled.div`
+  text-transform: uppercase;
+  font-size: 11px;
+`
+
+const FilterIcon = styled.img`
+  width: 40px;
+`
 
+const FilterCategory = ({ filter, onClick, selected }) => {
   return (
     <FilterContainer onClick={onClick} selected={selected}>
       <FilterIcon src={filter.icon} />
@@ -122,20 +114,9 @@ const FilterPanel = ({
     console.log(newGraph)
     updateGraph(newGraph)
   }
-  const FilterHeader = styled.div`
-    text-align: center;
-    text-transform: uppercase;
-    font-size: 14px;
-
-    @media screen and (max-width: 768px) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  `
+
   return (
     <HeaderContainer>
-      <FilterHeader>Cluster Filter</FilterHeader>
       <FilterMenuContainer>
         {filters.map((filterItem, filterIndex) => (
           <Fragment key={filterIndex}>

components/Loader.js

@@ -0,0 +1,132 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+
+const rotateBall = props => keyframes`
+    ${(((props.size / 2 / props.countBalls) * (props.index - 1)) / props.size) *
+      100}% {
+        opacity: 0;
+    }
+    ${(((props.size / 2 / props.countBalls + 0.0001) * (props.index - 1)) /
+      props.size) *
+      100}% {
+        opacity: 1;
+        transform: ${`rotate(${0 -
+          (360 / props.countBalls) * (props.index - 2)}deg)`};
+    }
+    ${(((props.size / 2 / props.countBalls) * (props.index - 0) + 2) /
+      props.size) *
+      100}% {
+        transform: ${`rotate(${0 -
+          (360 / props.countBalls) * (props.index - 1)}deg)`};
+    }
+    ${((props.size / 2 +
+      (props.size / 2 / props.countBalls) * (props.index - 0) +
+      2) /
+      props.size) *
+      100}% {
+        transform: ${`rotate(${0 -
+          (360 / props.countBalls) * (props.index - 1)}deg)`};
+    }
+    100% {
+        transform: ${`rotate(${0 -
+          (360 / props.countBalls) * (props.countBalls - 1)}deg)`};
+        opacity: 1;
+    }
+`
+
+const getBalls = ({
+  countBalls,
+  radius,
+  angle,
+  color,
+  size,
+  ballSize,
+  sizeUnit,
+}) => {
+  const balls = []
+  const offset = ballSize / 2
+  for (let i = 0; i < countBalls; i++) {
+    const y = Math.sin(angle * i * (Math.PI / 180)) * radius - offset
+    const x = Math.cos(angle * i * (Math.PI / 180)) * radius - offset
+    balls.push(
+      <Ball
+        countBalls={countBalls}
+        color={color}
+        ballSize={ballSize}
+        size={size}
+        sizeUnit={sizeUnit}
+        x={y}
+        y={x}
+        key={i.toString()}
+        index={i + 1}
+      />
+    )
+  }
+  return balls
+}
+
+const rotate = keyframes`
+    0% {
+        transform: rotate(0deg);
+    }
+    100%{
+        transform: rotate(-360deg);
+    }
+`
+
+const Wrapper = styled.div`
+  left: 20px;
+  position: fixed;
+  justify-content: center;
+  align-items: center;
+  width: ${props => `${props.size}${props.sizeUnit}`};
+  height: ${props => `${props.size}${props.sizeUnit}`};
+  animation: ${rotate} 3s infinite ease-in;
+`
+
+const Ball = styled.div`
+  position: absolute;
+  width: ${props => `${props.size}${props.sizeUnit}`};
+  height: ${props => `${props.size}${props.sizeUnit}`};
+  animation: ${rotateBall} 2s infinite linear;
+  transform: ${props => `rotate(${(360 / props.countBalls) * props.index}deg)`};
+  opacity: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 0%;
+    width: ${props => `${props.ballSize}${props.sizeUnit}`};
+    height: ${props => `${props.ballSize}${props.sizeUnit}`};
+    background-color: ${props => `${props.color}`};
+    transform: translateX(-50%);
+    border-radius: 50%;
+  }
+`
+
+export default function Loader({
+  size = 30,
+  color = '#201AA2',
+  loading = true,
+  sizeUnit = 'px',
+}) {
+  const radius = size / 2
+  const countBalls = 9
+  const ballSize = size / 8
+  const angle = 360 / countBalls
+  return (
+    loading && (
+      <Wrapper size={size} sizeUnit={sizeUnit}>
+        {getBalls({
+          countBalls,
+          radius,
+          angle,
+          color,
+          size,
+          ballSize,
+          sizeUnit,
+        })}
+      </Wrapper>
+    )
+  )
+}