Map loader + Chart loader + sourceLink on chart container

package.json

@@ -55,6 +55,7 @@
     "leaflet": "^1.5.1",
     "lodash": "^4.17.14",
     "prop-types": "^15.7.2",
+    "react-content-loader": "^4.2.2",
     "victory": "^32.3.1"
   },
   "peerDependencies": {

src/A.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Link } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = () => ({});
+
+function A({ ref, children, className, href, variant, ...props }) {
+  return (
+    <Link
+      ref={ref}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className}
+      variant={variant}
+      underline="always"
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}
+A.propTypes = {
+  ref: PropTypes.func,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired,
+  href: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  variant: PropTypes.string
+};
+
+A.defaultProps = {
+  ref: undefined,
+  className: null,
+  variant: 'inherit'
+};
+
+export default withStyles(styles)(A);

src/BlockLoader.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ContentLoader from './ContentLoader';
+
+export default function BlockLoader({ loading, children, ...props }) {
+  return loading ? (
+    <ContentLoader primaryOpacity={0.5} secondaryOpacity={1} {...props}>
+      <rect x="0" y="0" width="100%" height="100%" />
+    </ContentLoader>
+  ) : (
+    children
+  );
+}
+
+BlockLoader.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  children: PropTypes.shape().isRequired,
+  width: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOf([PropTypes.string, PropTypes.number])
+};
+
+BlockLoader.defaultProps = {
+  width: '100%',
+  height: '100%'
+};

src/ChartContainer/index.js

@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { makeStyles } from '@material-ui/styles';
-import { ButtonBase, Typography } from '@material-ui/core';
+import { ButtonBase } from '@material-ui/core';
 import Grid from '@material-ui/core/Grid';
+import BlockLoader from '../BlockLoader';
+import TypographyLoader from '../TypographyLoader';
 
 import infoIcon from '../assets/info.png';
 import shareIcon from '../assets/share.png';
+import A from '../A';
 
 const useStyles = makeStyles({
   root: {
@@ -16,9 +19,8 @@ const useStyles = makeStyles({
     padding: '1.5625rem 1.25rem'
   },
   content: {
-    padding: '1.25rem',
-    width: '100%',
-    height: '100%'
+    padding: '1.25rem 0',
+    overflow: 'hidden'
   },
   button: {
     border: '0.0625rem solid #d8d8d8',
@@ -29,10 +31,14 @@ const useStyles = makeStyles({
     }
   },
   title: {},
-  subtitle: {}
+  subtitle: {},
+  sourceLink: {}
 });
 
 function ChartContainer({
+  loading,
+  content,
+  sourceUrl,
   title,
   subtitle,
   children,
@@ -60,17 +66,34 @@ function ChartContainer({
         container
         wrap="nowrap"
         direction="row"
-        alignItems="center"
+        alignItems="flex-start"
         justify="space-between"
       >
         <Grid item xs={8}>
-          <Typography className={classes.title} variant="h5">
+          <TypographyLoader
+            loading={loading}
+            loader={{
+              primaryOpacity: 0.5,
+              secondaryOpacity: 1
+            }}
+            className={classes.title}
+            variant="h5"
+          >
             {title}
-          </Typography>
-          <Typography className={classes.subtitle} variant="h6">
+          </TypographyLoader>
+          <TypographyLoader
+            loading={loading}
+            loader={{
+              primaryOpacity: 0.5,
+              secondaryOpacity: 1
+            }}
+            className={classes.subtitle}
+            variant="h6"
+          >
             {subtitle}
-          </Typography>
+          </TypographyLoader>
         </Grid>
+
         <Grid
           item
           xs={4}
@@ -79,29 +102,48 @@ function ChartContainer({
           direction="row"
           justify="flex-end"
         >
-          <ButtonBase
-            className={classes.button}
-            onClick={() =>
-              onClickInfo && onClickInfo(getReferenceObject(infoRef))
-            }
-            ref={infoRef}
-          >
-            <img alt="Info" src={infoIcon} />
-          </ButtonBase>
-          <ButtonBase
-            className={classes.button}
-            onClick={() =>
-              onClickShare && onClickShare(getReferenceObject(shareRef))
-            }
-            ref={shareRef}
-          >
-            <img alt="Share" src={shareIcon} />
-          </ButtonBase>
+          <BlockLoader loading={loading} width="5rem" height="2.5rem">
+            <ButtonBase
+              className={classes.button}
+              onClick={() =>
+                onClickInfo && onClickInfo(getReferenceObject(infoRef))
+              }
+              ref={infoRef}
+            >
+              <img alt="Info" src={infoIcon} />
+            </ButtonBase>
+            <ButtonBase
+              className={classes.button}
+              onClick={() =>
+                onClickShare && onClickShare(getReferenceObject(shareRef))
+              }
+              ref={shareRef}
+            >
+              <img alt="Share" src={shareIcon} />
+            </ButtonBase>
+          </BlockLoader>
         </Grid>
       </Grid>
-      <Grid container justify="center">
-        <div className={classes.content}>{children}</div>
+      <Grid
+        container
+        justify="center"
+        className={classes.content}
+        style={{ width: content.width, height: content.height }}
+      >
+        <BlockLoader loading={loading}>{children}</BlockLoader>
       </Grid>
+      <TypographyLoader
+        loading={loading}
+        loader={{
+          primaryOpacity: 0.5,
+          secondaryOpacity: 1
+        }}
+        component="span"
+      >
+        <A className={classes.sourceLink} href={sourceUrl}>
+          {sourceUrl}
+        </A>
+      </TypographyLoader>
     </Grid>
   );
 }
@@ -114,12 +156,24 @@ ChartContainer.propTypes = {
   onClickInfo: PropTypes.func,
   onClickShare: PropTypes.func,
   subtitle: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  sourceUrl: PropTypes.string,
+  loading: PropTypes.bool,
+  content: PropTypes.shape({
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  })
 };
 
 ChartContainer.defaultProps = {
+  sourceUrl: undefined,
   onClickInfo: undefined,
-  onClickShare: undefined
+  onClickShare: undefined,
+  loading: false,
+  content: {
+    width: '100%',
+    height: '100%'
+  }
 };
 
 export default ChartContainer;

src/ContentLoader.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ContentLoader from 'react-content-loader';
+
+export default function CustomContentLoader({
+  children,
+  height,
+  width,
+  ...props
+}) {
+  return (
+    <ContentLoader
+      primaryOpacity={0.01}
+      secondaryOpacity={0.1}
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${width} ${height}`}
+      style={{ width, height }}
+      {...props}
+    >
+      {children}
+    </ContentLoader>
+  );
+}
+
+CustomContentLoader.propTypes = {
+  children: PropTypes.shape().isRequired,
+  width: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOf([PropTypes.string, PropTypes.number])
+};
+
+CustomContentLoader.defaultProps = {
+  width: '100%',
+  height: '100%'
+};

src/MapIt/index.js

@@ -1,10 +1,17 @@
-import React, { useEffect, useRef, useCallback, useState } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useCallback,
+  useState,
+  Fragment
+} from 'react';
 import PropTypes from 'prop-types';
 
 import leaflet from 'leaflet';
 import { makeStyles } from '@material-ui/core';
 
 import 'leaflet/dist/leaflet.css';
+import BlockLoader from '../BlockLoader';
 import useDeepRef from './useDeepRef';
 
 const useStyles = makeStyles({
@@ -291,7 +298,20 @@ function MapIt({
   ]);
   const classes = useStyles();
 
-  return <div id={mapId} className={classes.root} />;
+  return (
+    <Fragment>
+      {!featuresToDraw && (
+        <div className={classes.root}>
+          <BlockLoader loading width="100%" height="100%" />
+        </div>
+      )}
+      <div
+        id={mapId}
+        className={classes.root}
+        style={{ display: !featuresToDraw ? 'hidden' : 'block' }}
+      />
+    </Fragment>
+  );
 }
 
 MapIt.propTypes = {

src/TypographyLoader.js

@@ -0,0 +1,49 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Typography } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import ContentLoader from './ContentLoader';
+
+export default function TypographyLoader({
+  loading,
+  loader,
+  children,
+  ...props
+}) {
+  const ref = useRef();
+  const [height, setHeight] = useState();
+  useEffect(() => {
+    if (ref.current) {
+      const typography = ref.current;
+      const style = window.getComputedStyle(typography);
+      setHeight(style.lineHeight);
+    }
+  }, []);
+  return (
+    <Typography ref={ref} {...props}>
+      {loading ? (
+        <ContentLoader style={{ height, width: '100%' }} {...loader}>
+          <rect x="0" y="0" width="100%" height="100%" />
+        </ContentLoader>
+      ) : (
+        children
+      )}
+    </Typography>
+  );
+}
+
+TypographyLoader.propTypes = {
+  children: PropTypes.shape().isRequired,
+  loading: PropTypes.bool,
+  loader: PropTypes.shape({
+    width: PropTypes.oneOf([PropTypes.number, PropTypes.string]).isRequired,
+    height: PropTypes.oneOf([PropTypes.number, PropTypes.string]).isRequired
+  })
+};
+
+TypographyLoader.defaultProps = {
+  loading: false,
+  loader: {
+    width: '100%',
+    height: '20px'
+  }
+};

src/index.js

@@ -12,3 +12,7 @@ export { default as ComparisonBarChart } from './ComparisonBarChart';
 export { default as ChartContainer } from './ChartContainer';
 export { default as EmbedPopup } from './ChartContainer/EmbedPopup';
 export { default as InfoPopup } from './ChartContainer/InfoPopup';
+export { default as ContentLoader } from './ContentLoader';
+export { default as BlockLoader } from './BlockLoader';
+export { default as TypographyLoader } from './TypographyLoader';
+export { default as A } from './A';

stories/Theme.js

@@ -0,0 +1,3 @@
+import createTheme from '../src/styles/createTheme';
+
+export default createTheme();