Add content loader for global website stats page

ooni · Sep 11, 2020 · c037cad · c037cad
1 parent 0f5306f
commit c037cad
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/components/aggregation/website/GlobalLoader.js b/components/aggregation/website/GlobalLoader.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import ContentLoader from 'react-content-loader'
+import { Flex, Box, theme } from 'ooni-components'
+
+export const GlobalLoader = (props) => (
+  <Flex flexWrap='wrap'>
+    {Array(Math.floor(Math.random() * 3 + 3)).fill('').map((e, i) => (
+      <Box width={1/2} my={3} key={i}>
+        <ContentLoader
+          speed={1}
+          width={624}
+          height={160}
+          viewBox="0 0 624 160"
+          primaryColor={theme.colors.gray3}
+          secondaryColor={theme.colors.gray5}
+          {...props}
+        >
+          <rect x="70" y="8" rx="3" ry="3" width="32" height="24" />
+          <rect x="70" y="40" rx="3" ry="3" width="56" height="6" />
+          <circle cx="25" cy="25" r="25" />
+
+          <rect x="3" y="108" rx="0" ry="0" width="200" height="32" />
+          <rect x="205" y="108" rx="0" ry="0" width="60" height="32" />
+          <rect x="267" y="108" rx="0" ry="0" width="32" height="32" />
+
+          <rect x="551" y="108" rx="0" ry="0" width="32" height="32" />
+          <rect x="526" y="13" rx="0" ry="0" width="56" height="32" />
+        </ContentLoader>
+      </Box>
+    ))}
+  </Flex>
+)
diff --git a/pages/experimental/website/index.js b/pages/experimental/website/index.js
@@ -1,9 +1,9 @@
 /* global process */
 
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect } from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import { Container, Flex, Box, Text } from 'ooni-components'
+import { Container, Flex, Box } from 'ooni-components'
 import useSWR from 'swr'
 import moment from 'moment'
 import axios from 'axios'
@@ -16,6 +16,7 @@ import Global from '../../../components/aggregation/website/Global'
 import Form from '../../../components/aggregation/website/Form'
 import { paramsToQuery, queryToParams } from '../../../components/aggregation/website/queryUtils'
 import { Debug } from '../../../components/aggregation/website/Debug'
+import { GlobalLoader } from '../../../components/aggregation/website/GlobalLoader'
 
 const AGGREGATION_API = `${process.env.MEASUREMENTS_URL}/api/v1/aggregation?`
 
@@ -67,11 +68,7 @@ const WebsiteAnalytics = () => {
               {data && JSON.stringify(data, null, 2)}
             </pre>
           </Debug>
-          {!data && !error &&
-            <Flex style={{ height: '300px' }} alignItems='center'>
-              <Text width={1} fontSize={[1, 3]} textAlign='center' color='gray5'> Fetching data ... </Text>
-            </Flex>
-          }
+          {!data && !error && <GlobalLoader />}
           {data && data.result && (
             <Box>
               <Global data={data.result} />