From 03f400bf52150b55469799a3f566b03d6b61a9ba Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Sun, 8 May 2022 05:10:51 +0530
Subject: [PATCH] Added loading state for statistics widget (#2882)

* added loading state in Statistics Widget

* removed unwanted uses of hooks and destructured loadingState from the properties
---
 frontend/src/Editor/Components/Statistics.jsx | 87 +++++++++++--------
 frontend/src/Editor/Components/components.js  |  2 +
 2 files changed, 54 insertions(+), 35 deletions(-)

diff --git a/frontend/src/Editor/Components/Statistics.jsx b/frontend/src/Editor/Components/Statistics.jsx
index b3686db46d..21c8c97237 100644
--- a/frontend/src/Editor/Components/Statistics.jsx
+++ b/frontend/src/Editor/Components/Statistics.jsx
@@ -1,7 +1,14 @@
 import React from 'react';
-export const Statistics = function Statistics({ height, properties, styles, darkMode }) {
-  const { primaryValueLabel, primaryValue, secondaryValueLabel, secondaryValue, secondarySignDisplay, hideSecondary } =
-    properties;
+export const Statistics = function Statistics({ width, height, properties, styles, darkMode }) {
+  const {
+    primaryValueLabel,
+    primaryValue,
+    secondaryValueLabel,
+    secondaryValue,
+    secondarySignDisplay,
+    hideSecondary,
+    loadingState,
+  } = properties;
   const { primaryLabelColour, primaryTextColour, secondaryLabelColour, secondaryTextColour, visibility } = styles;
 
   const baseStyle = {
@@ -64,45 +71,55 @@ export const Statistics = function Statistics({ height, properties, styles, dark
 
   return (
     <div style={baseStyle}>
-      <p
-        style={{
-          ...letterStyle,
-          ...marginStyle,
-          color: primaryLabelColour !== '#8092AB' ? primaryLabelColour : darkMode && '#FFFFFC',
-        }}
-      >
-        {primaryValueLabel}
-      </p>
-      <h2 style={primaryStyle}>{primaryValue}</h2>
-      {hideSecondary ? (
-        ''
+      {loadingState === true ? (
+        <div style={{ width }} className="p-2">
+          <center>
+            <div className="spinner-border" role="status"></div>
+          </center>
+        </div>
       ) : (
-        <div>
-          <div className="d-flex flex-row justify-content-center align-items-baseline">
-            {secondarySignDisplay !== 'negative' ? (
-              <img
-                src="/assets/images/icons/widgets/upstatistics.svg"
-                style={{ ...marginStyle, marginRight: '6.5px' }}
-              />
-            ) : (
-              <img
-                src="/assets/images/icons/widgets/downstatistics.svg"
-                style={{ ...marginStyle, marginRight: '6.5px' }}
-              />
-            )}
-            <p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
-          </div>
+        <>
           <p
             style={{
               ...letterStyle,
-              color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
-              padding: '6px 20px 12px 20px ',
-              marginBottom: '0px',
+              ...marginStyle,
+              color: primaryLabelColour !== '#8092AB' ? primaryLabelColour : darkMode && '#FFFFFC',
             }}
           >
-            {secondaryValueLabel}
+            {primaryValueLabel}
           </p>
-        </div>
+          <h2 style={primaryStyle}>{primaryValue}</h2>
+          {hideSecondary ? (
+            ''
+          ) : (
+            <div>
+              <div className="d-flex flex-row justify-content-center align-items-baseline">
+                {secondarySignDisplay !== 'negative' ? (
+                  <img
+                    src="/assets/images/icons/widgets/upstatistics.svg"
+                    style={{ ...marginStyle, marginRight: '6.5px' }}
+                  />
+                ) : (
+                  <img
+                    src="/assets/images/icons/widgets/downstatistics.svg"
+                    style={{ ...marginStyle, marginRight: '6.5px' }}
+                  />
+                )}
+                <p style={{ ...secondaryContainerStyle }}>{secondaryValue}</p>
+              </div>
+              <p
+                style={{
+                  ...letterStyle,
+                  color: secondaryLabelColour !== '#8092AB' ? secondaryLabelColour : darkMode && '#FFFFFC',
+                  padding: '6px 20px 12px 20px ',
+                  marginBottom: '0px',
+                }}
+              >
+                {secondaryValueLabel}
+              </p>
+            </div>
+          )}
+        </>
       )}
     </div>
   );
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 2a30fb0560..3771295625 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -1854,6 +1854,7 @@ export const componentTypes = [
       secondaryValueLabel: { type: 'code', displayName: 'Secondary value label' },
       secondaryValue: { type: 'code', displayName: 'Secondary value' },
       secondarySignDisplay: { type: 'code', displayName: 'Secondary sign display' },
+      loadingState: { type: 'toggle', displayName: 'Loading State' },
     },
     events: {},
     styles: {
@@ -1874,6 +1875,7 @@ export const componentTypes = [
         secondaryValueLabel: { value: 'Last month' },
         secondaryValue: { value: '2.85' },
         secondarySignDisplay: { value: 'positive' },
+        loadingState: { value: `{{false}}` },
       },
       events: [],
       styles: {