add the loading skeletor

RedHatInsights · Jul 18, 2019 · cd185e1 · cd185e1
1 parent 647182c
commit cd185e1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 10 deletions.
diff --git a/src/common/graphHelpers.js b/src/common/graphHelpers.js
@@ -47,7 +47,6 @@ const convertGraphData = ({ usage, startDate, endDate, tSockectsOn, tFromPreviou
     return chartData;
   } catch (e) {
     // todo: show error toast ?
-    console.error(e);
     return zeroedUsageArray(startDate, endDate);
   }
 };

diff --git a/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap b/src/components/rhelGraphCard/__tests__/__snapshots__/rhelGraphCard.test.js.snap
@@ -972,11 +972,20 @@ exports[`RhelGraphCard Component should render multiple states: pending 1`] = `
   </CardHead>
   <CardBody>
     <div
-      className="stack-chart-container"
+      className="skeleton-container"
     >
-      <small>
-        Loading...
-      </small>
+      <Skeleton
+        size="xs"
+      />
+      <Skeleton
+        size="sm"
+      />
+      <Skeleton
+        size="md"
+      />
+      <Skeleton
+        size="lg"
+      />
     </div>
   </CardBody>
 </Card>

diff --git a/src/components/rhelGraphCard/rhelGraphCard.js b/src/components/rhelGraphCard/rhelGraphCard.js
@@ -11,6 +11,7 @@ import {
   DropdownToggle,
   DropdownPosition
 } from '@patternfly/react-core';
+import { Skeleton, SkeletonSize } from '@redhat-cloud-services/frontend-components';
 import { Chart, ChartBar, ChartBaseTheme, ChartLabel, ChartStack, ChartTooltip } from '@patternfly/react-charts';
 import { connectTranslate, reduxActions } from '../../redux';
 import { helpers } from '../../common/helpers';
@@ -66,7 +67,6 @@ class RhelGraphCard extends React.Component {
         tSockectsOn: t('curiosity-graph.socketsOn', 'sockets on'),
         tFromPrevious: t('curiosity-graph.fromPrevious', 'from previous day')
       });
-      console.log('chartData', chartData, 'startDate', this.startDate, 'endDate', this.endDate);
     }
 
     const dropdownToggle = (
@@ -117,8 +117,11 @@ class RhelGraphCard extends React.Component {
         </CardHead>
         {pending && (
           <CardBody>
-            <div className="stack-chart-container">
-              <small>Loading...</small>
+            <div className="skeleton-container">
+              <Skeleton size={SkeletonSize.xs} />
+              <Skeleton size={SkeletonSize.sm} />
+              <Skeleton size={SkeletonSize.md} />
+              <Skeleton size={SkeletonSize.lg} />
             </div>
           </CardBody>
         )}

diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss
@@ -3,6 +3,18 @@
     var(--pf-global--BorderColor--100);
 }
 
+.curiosity-usage-graph .skeleton-container {
+  padding-top: var(--pf-c-card--child--PaddingBottom);
+}
+
+.curiosity-usage-graph .skeleton-container .ins-c-skeleton {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
 .curiosity-usage-graph .stack-chart-container svg {
   > g:nth-child(2) {
     > g {

diff --git a/tests/__snapshots__/i18n.test.js.snap b/tests/__snapshots__/i18n.test.js.snap
@@ -10,7 +10,7 @@ msgctxt \\"Daily CPU socket usage\\"
 msgid \\"curiosity-graph.heading\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:67
+#: src/components/rhelGraphCard/rhelGraphCard.js:68
 msgctxt \\"from previous day\\"
 msgid \\"curiosity-graph.fromPrevious\\"
 msgstr \\"\\"
@@ -20,7 +20,7 @@ msgctxt \\"Last 30 Days\\"
 msgid \\"curiosity-graph.dropdownDefault\\"
 msgstr \\"\\"
 
-#: src/components/rhelGraphCard/rhelGraphCard.js:66
+#: src/components/rhelGraphCard/rhelGraphCard.js:67
 msgctxt \\"sockets on\\"
 msgid \\"curiosity-graph.socketsOn\\"
 msgstr \\"\\"