Added skeleton loading state for data consumption and object data red…

…uction card Signed-off-by: Afreen Rahman <afrahman@redhat.com>
openshift · May 18, 2020 · d004c69 · d004c69
1 parent fda6322
commit d004c69
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 62 deletions.
diff --git a/...ges/noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card.scss b/...ges/noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card.scss
@@ -9,3 +9,14 @@
 .nb-data-consumption-card__chart-label {
   margin-top: var(--pf-global--spacer--md);
 }
+
+.nb-data-consumption-card__chart-skeleton {
+  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-global--spacer--md);
+  width: 50%;
+}
+
+.nb-data-consumption-card__chart-legend-skeleton {
+  margin-top: var(--pf-global--spacer--md);
+  width: 80%;
+}
diff --git a/...ages/noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card.tsx b/...ages/noobaa-storage-plugin/src/components/data-consumption-card/data-consumption-card.tsx
@@ -56,6 +56,7 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
   let suffixLabel = '';
   let maxVal: number;
   let maxUnit: string;
+  let body: React.ReactNode;
 
   const isLoading = _.values(result).includes(undefined);
 
@@ -81,6 +82,73 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
     if (suffixLabel) suffixLabel = `(in ${suffixLabel})`;
   }
 
+  if (isLoading) {
+    body = (
+      <>
+        <div className="skeleton-text nb-data-consumption-card__chart-skeleton" />
+        <GraphEmpty height={200} loading />
+        <div className="skeleton-text nb-data-consumption-card__chart-legend-skeleton" />
+      </>
+    );
+  } else if (!error && !chartData.some(_.isEmpty)) {
+    body = (
+      <>
+        <div className="nb-data-consumption-card__chart-label text-secondary">
+          {CHART_LABELS[sortByKpi]} {suffixLabel}
+        </div>
+        <Chart
+          containerComponent={
+            <ChartVoronoiContainer
+              labelComponent={<ChartTooltip style={{ fontSize: 8, paddingBottom: 0 }} />}
+              labels={({ datum }) => `${datum.y} ${maxUnit}`}
+              voronoiDimension="x"
+            />
+          }
+          minDomain={{ y: 0 }}
+          maxDomain={{ y: maxVal + Math.round(maxVal * 0.25) }}
+          domainPadding={{ x: [padding, padding] }}
+          legendComponent={
+            <ChartLegend
+              themeColor={ChartThemeColor.purple}
+              data={legendData}
+              orientation="horizontal"
+              symbolSpacer={5}
+              gutter={2}
+              height={30}
+              padding={{ top: 50, bottom: 0 }}
+              style={{ labels: { fontSize: 8 } }}
+            />
+          }
+          legendPosition="bottom-left"
+          padding={{
+            bottom: 50,
+            left: 30,
+            right: 20,
+            top: 30,
+          }}
+          themeColor={ChartThemeColor.purple}
+        >
+          <ChartAxis style={{ tickLabels: { fontSize: 8, padding: 2 } }} />
+          <ChartAxis
+            dependentAxis
+            showGrid
+            tickCount={10}
+            style={{
+              tickLabels: { fontSize: 8, padding: 0 },
+            }}
+          />
+          <ChartGroup offset={sortByKpi === BY_EGRESS ? 0 : 11}>
+            {chartData.map((data, i) => (
+              <ChartBar key={`chartbar-${i}`} data={data} /> // eslint-disable-line react/no-array-index-key
+            ))}
+          </ChartGroup>
+        </Chart>
+      </>
+    );
+  } else {
+    body = <GraphEmpty />;
+  }
+
   return (
     <DashboardCard>
       <DashboardCardHeader>
@@ -92,64 +160,7 @@ const DataConsumptionCard: React.FC<DashboardItemProps> = ({
           setKpi={setsortByKpi}
         />
       </DashboardCardHeader>
-      <DashboardCardBody className="co-dashboard-card__body--top-margin" isLoading={isLoading}>
-        {!error && !chartData.some(_.isEmpty) ? (
-          <>
-            <div className="nb-data-consumption-card__chart-label text-secondary">
-              {CHART_LABELS[sortByKpi]} {suffixLabel}
-            </div>
-            <Chart
-              containerComponent={
-                <ChartVoronoiContainer
-                  labelComponent={<ChartTooltip style={{ fontSize: 8, paddingBottom: 0 }} />}
-                  labels={({ datum }) => `${datum.y} ${maxUnit}`}
-                  voronoiDimension="x"
-                />
-              }
-              minDomain={{ y: 0 }}
-              maxDomain={{ y: maxVal + 10 }}
-              domainPadding={{ x: [padding, padding] }}
-              legendComponent={
-                <ChartLegend
-                  themeColor={ChartThemeColor.purple}
-                  data={legendData}
-                  orientation="horizontal"
-                  symbolSpacer={5}
-                  gutter={2}
-                  height={30}
-                  padding={{ top: 50, bottom: 0 }}
-                  style={{ labels: { fontSize: 8 } }}
-                />
-              }
-              legendPosition="bottom-left"
-              padding={{
-                bottom: 50,
-                left: 30,
-                right: 20,
-                top: 30,
-              }}
-              themeColor={ChartThemeColor.purple}
-            >
-              <ChartAxis style={{ tickLabels: { fontSize: 8, padding: 2 } }} />
-              <ChartAxis
-                dependentAxis
-                showGrid
-                tickCount={10}
-                style={{
-                  tickLabels: { fontSize: 8, padding: 0 },
-                }}
-              />
-              <ChartGroup offset={sortByKpi === BY_EGRESS ? 0 : 11}>
-                {chartData.map((data, i) => (
-                  <ChartBar key={i} data={data} /> // eslint-disable-line react/no-array-index-key
-                ))}
-              </ChartGroup>
-            </Chart>
-          </>
-        ) : (
-          <GraphEmpty />
-        )}
-      </DashboardCardBody>
+      <DashboardCardBody className="co-dashboard-card__body--top-margin">{body}</DashboardCardBody>
     </DashboardCard>
   );
 };

diff --git a/...rage-plugin/src/components/object-data-reduction-card/object-data-reduction-card-item.tsx b/...rage-plugin/src/components/object-data-reduction-card/object-data-reduction-card-item.tsx
@@ -3,16 +3,15 @@ import {
   FieldLevelHelp,
   humanizeBinaryBytes,
   humanizePercentage,
-  LoadingInline,
 } from '@console/internal/components/utils';
 
 const ItemBody: React.FC<ItemBodyProps> = React.memo(
   ({ title, stats, infoText, isLoading, error }) => {
     let status: React.ReactElement;
-    if (error || !stats) {
+    if (isLoading) {
+      status = <div className="skeleton-text nb-object-data-reduction__item-body--loading" />;
+    } else if (error || !stats) {
       status = <span className="co-dashboard-text--small text-muted">Not available</span>;
-    } else if (isLoading) {
-      status = <LoadingInline />;
     } else {
       status = <span className="nb-object-data-reduction-card__row-status-item-text">{stats}</span>;
     }

diff --git a/...-storage-plugin/src/components/object-data-reduction-card/object-data-reduction-card.scss b/...-storage-plugin/src/components/object-data-reduction-card/object-data-reduction-card.scss
@@ -22,3 +22,7 @@
 .nb-object-data-reduction-card__row-title {
   margin-right: 0.5em;
 }
+
+.nb-object-data-reduction__item-body--loading {
+  width: 9rem;
+}