From 18543112ff2002e435a5fff545dadf1feba0a9e2 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sat, 15 May 2021 18:41:18 +0530
Subject: [PATCH] Feature: Loading state for charts

---
 frontend/src/Editor/Components/Chart.jsx     | 20 ++++++++++++++------
 frontend/src/Editor/Components/components.js |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Editor/Components/Chart.jsx b/frontend/src/Editor/Components/Chart.jsx
index 16df0f0881..5a2908d2ca 100644
--- a/frontend/src/Editor/Components/Chart.jsx
+++ b/frontend/src/Editor/Components/Chart.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { resolveReferences } from '@/_helpers/utils';
 import Plot from 'react-plotly.js';
+import Skeleton from 'react-loading-skeleton';
 
 export const Chart = function Chart({
   id, width, height, component, onComponentClick, currentState
@@ -19,7 +20,8 @@ export const Chart = function Chart({
 
   const computedStyles = {
     width,
-    height
+    height,
+    backgroundColor: 'white'
   };
 
   const dataProperty = component.definition.properties.data;
@@ -64,11 +66,17 @@ export const Chart = function Chart({
       style={computedStyles}
       onClick={() => onComponentClick(id, component)}
     >
-      <Plot
-        data={chartData}
-        layout={layout}
-        config={{displayModeBar: false}}
-      />
+      {loadingState === true ? 
+        <div style={{ width: '100%' }} className="p-2">
+          <Skeleton count={5} />
+        </div>
+      :
+        <Plot
+          data={chartData}
+          layout={layout}
+          config={{displayModeBar: false}}
+        />
+      } 
     </div>
   );
 };
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 848aa73108..3e3ab364b0 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -143,7 +143,7 @@ export const componentTypes = [
     definition: {
       properties: {
         title: { value: 'This title can be changed' },
-        markerColor: { value: 'red' },
+        markerColor: { value: '#CDE1F8' },
         showGridLines: { value: true },
         loadingState: { value: `{{false}}` },
         type: { value: `line` },