feat(search): add LoadingGrid component

opencollective · Apr 30, 2018 · 915abab · 915abab
1 parent dd4dcb8
commit 915abab
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 4 deletions.
diff --git a/src/components/LoadingGrid.js b/src/components/LoadingGrid.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+const LoadingGrid = ({ color, size }) => (
+  <svg width={size} height={size} viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg" fill={color}>
+    <circle cx="12.5" cy="12.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5">
+      <animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="52.5" cy="12.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="52.5" cy="52.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="92.5" cy="12.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="92.5" cy="52.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="12.5" cy="92.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="52.5" cy="92.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+    <circle cx="92.5" cy="92.5" r="12.5">
+      <animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"/>
+    </circle>
+  </svg>
+);
+
+LoadingGrid.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.number,
+};
+
+LoadingGrid.defaultProps = {
+  color: '#46B0ED',
+  size: 100,
+};
+
+export default LoadingGrid;
diff --git a/src/pages/search.js b/src/pages/search.js
@@ -19,7 +19,7 @@ import CollectiveCard from '../components/CollectiveCard';
 import ErrorPage from '../components/ErrorPage';
 import Footer from '../components/Footer';
 import Header from '../components/Header';
-import Loading from '../components/Loading';
+import LoadingGrid from '../components/LoadingGrid';
 
 import colors from '../constants/colors';
 
@@ -83,6 +83,12 @@ class SearchPage extends React.Component {
             font-family: lato;
             padding: 0;
           }
+
+          .loading {
+            padding: 2rem 0;
+            text-align: center;
+            width: 100%;
+          }
         `}</style>
         <Header />
         <Body>
@@ -101,8 +107,11 @@ class SearchPage extends React.Component {
               </Col>
             </Row>
             <Row className="results-row">
-              { /* TODO: add loading indicator for just this row */ }
-              { loading && <p>Loading...</p> }
+              { loading && (
+                <div className="loading">
+                  <LoadingGrid /> 
+                </div>
+              )}
               { /* TODO: add suggested collectives when the result is empty */ } 
               {!!search && !loading && search.map(collective => (
                 <Col className="col">
@@ -117,6 +126,6 @@ class SearchPage extends React.Component {
       </div>
     )
   }
-};
+}
 
 export default withData(addSearchQueryData(withIntl(SearchPage)));