fix(Charts): Show Loading Placeholder

config/jestsetup.ts

@@ -2,6 +2,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { createSerializer } from 'enzyme-to-json';
 import jssSerializer from '@shared/tests/serializer/jss-snapshot-serializer';
+import contentLoaderSerializer from '@shared/tests/serializer/content-loader-serializer.js';
 
 process.env.NODE_ENV = 'test';
 process.env.BABEL_ENV = 'test';
@@ -22,6 +23,7 @@ expect.addSnapshotSerializer(
   })
 );
 expect.addSnapshotSerializer(jssSerializer);
+expect.addSnapshotSerializer(contentLoaderSerializer);
 
 export const setupMatchMedia = () => {
   // @ts-ignore

packages/charts/src/components/BarChart/BarChart.test.tsx

@@ -5,15 +5,15 @@ import { BarChart } from './index';
 
 describe('BarChart', () => {
   test('Renders with data', () => {
-    renderThemedComponent(<BarChart labels={labels} datasets={singleDataset} />);
+    mountThemedComponent(<BarChart labels={labels} datasets={singleDataset} />);
   });
 
   test('custom colors', () => {
-    renderThemedComponent(<BarChart labels={labels} datasets={singleDataset} colors={['#f0ab00']} />);
+    mountThemedComponent(<BarChart labels={labels} datasets={singleDataset} colors={['#f0ab00']} />);
   });
 
   test('valueAxisFormatter', () => {
-    renderThemedComponent(<BarChart labels={labels} datasets={singleDataset} valueAxisFormatter={(d) => `${d}%`} />);
+    mountThemedComponent(<BarChart labels={labels} datasets={singleDataset} valueAxisFormatter={(d) => `${d}%`} />);
   });
 
   test('with Ref', () => {
@@ -23,12 +23,17 @@ describe('BarChart', () => {
   });
 
   test('stacked', () => {
-    renderThemedComponent(
+    mountThemedComponent(
       <BarChart
         labels={labels}
         datasets={datasets}
         options={{ scales: { yAxes: [{ stacked: true }], xAxes: [{ stacked: true }] } }}
       />
     );
   });
+
+  test('loading placeholder', () => {
+    const wrapper = mountThemedComponent(<BarChart labels={labels} datasets={[]} loading />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

packages/charts/src/components/BarChart/Placeholder.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ContentLoader from 'react-content-loader';
 
-export const BarChartPlaceholder = (props) => {
+export const BarChartPlaceholder = () => {
   return (
     <ContentLoader
       height={145}
@@ -10,7 +10,6 @@ export const BarChartPlaceholder = (props) => {
       primaryColor="#6a6d70"
       secondaryColor="#d9d9d9"
       primaryOpacity={0.3}
-      {...props}
     >
       <rect x="20" y="10" width="1" height="135" />
       <rect x="20" y="20" width="85" height="15" />

packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BarChart loading placeholder 1`] = `
+<div
+  class="-chart- -chart-0-"
+  style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
+>
+  <svg
+    aria-label="Loading interface..."
+    preserveAspectRatio="none"
+    role="img"
+    viewBox="0 0 165 145"
+  >
+    <title>
+      Loading interface...
+    </title>
+    <rect
+      clip-path="CLIP-PATH-URL"
+      height="145"
+      style="fill: url(#STYLE-URL);"
+      width="165"
+      x="0"
+      y="0"
+    />
+    <defs>
+      <clipPath
+        id="CLIP-PATH-URL"
+      >
+        <rect
+          height="135"
+          width="1"
+          x="20"
+          y="10"
+        />
+        <rect
+          height="15"
+          width="85"
+          x="20"
+          y="20"
+        />
+        <rect
+          height="15"
+          width="117"
+          x="20"
+          y="40"
+        />
+        <rect
+          height="15"
+          width="67"
+          x="20"
+          y="60"
+        />
+        <rect
+          height="15"
+          width="75"
+          x="20"
+          y="80"
+        />
+        <rect
+          height="15"
+          width="125"
+          x="20"
+          y="100"
+        />
+        <rect
+          height="15"
+          width="60"
+          x="20"
+          y="120"
+        />
+      </clipPath>
+      <linearGradient
+        id="STYLE-URL"
+      >
+        <stop
+          offset="0%"
+          stop-color="#6a6d70"
+          stop-opacity="0.3"
+        >
+          <animate
+            attributeName="offset"
+            dur="2s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="-2; -2; 1"
+          />
+        </stop>
+        <stop
+          offset="50%"
+          stop-color="#d9d9d9"
+          stop-opacity="1"
+        >
+          <animate
+            attributeName="offset"
+            dur="2s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="-1; -1; 2"
+          />
+        </stop>
+        <stop
+          offset="100%"
+          stop-color="#6a6d70"
+          stop-opacity="0.3"
+        >
+          <animate
+            attributeName="offset"
+            dur="2s"
+            keyTimes="0; 0.25; 1"
+            repeatCount="indefinite"
+            values="0; 0; 3"
+          />
+        </stop>
+      </linearGradient>
+    </defs>
+  </svg>
+</div>
+`;

packages/charts/src/components/BarChart/demo.stories.tsx

@@ -53,4 +53,5 @@ storiesOf('Charts | BarChart', module)
       options={options}
       loading={boolean('loading')}
     />
-  ));
+  ))
+  .add('Loading Placeholder', () => <BarChart labels={labels} loading={boolean('loading', true)} />);