From dc7ee957a337280533978e112a1d8f32a6169bfb Mon Sep 17 00:00:00 2001
From: Dagmara <lyczak.dagmara@gmail.com>
Date: Sat, 17 Sep 2022 21:44:35 +0200
Subject: [PATCH] feat: skeleton in data browser

---
 .../DataBrowserHeaderBar.react.js             | 27 +++++++++++++++--
 .../DataBrowserHeaderBar.scss                 | 29 +++++++++++++++++++
 .../Data/Browser/BrowserTable.react.js        |  4 ++-
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
index b1c89280ca..d021924386 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -14,7 +14,7 @@ import { DndProvider }     from 'react-dnd'
 
 export default class DataBrowserHeaderBar extends React.Component {
   render() {
-    let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits, selected } = this.props;
+    let { headers, onResize, selectAll, onAddColumn, updateOrdering, readonly, preventSchemaEdits, selected, isDataLoaded } = this.props;
     let elements = [
       <div key='check' className={[styles.wrap, styles.check].join(' ')}>
         {readonly
@@ -85,9 +85,32 @@ export default class DataBrowserHeaderBar extends React.Component {
       );
     }
 
+    function renderSkeleton() {
+      if (isDataLoaded) return null;
+      var skeletons = [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1];
+      return (
+        <div className={styles.skeleton}>
+          {skeletons.map(function (opacity, index) {
+            return (
+              <div
+                key={index}
+                className={styles.skeletonRow}
+                style={{
+                  opacity,
+                }}
+              ></div>
+            );
+          })}
+        </div>
+      );
+    }
+
     return (
       <DndProvider backend={HTML5Backend}>
-        <div className={styles.bar}>{elements}</div>
+        <div className={styles.bar}>
+          {elements}
+          {renderSkeleton()}
+        </div>
       </DndProvider>
     )
   }
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
index d6d2097b92..df45061d13 100644
--- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
+++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -77,3 +77,32 @@
     cursor: not-allowed;
   }
 }
+
+.skeleton {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 30px;
+}
+
+.skeletonRow {
+  border-top: 1px solid #e3e3ea;
+  border-bottom: 1px solid #e3e3ea;
+  height: 30px;
+  width:100%;
+  vertical-align: middle;
+  padding-left: 2px;
+  margin-top: 30px;
+  line-height: 31px;
+  animation: skeleton-loading 1s linear infinite alternate;
+}
+  
+@keyframes skeleton-loading {
+  0% {
+    background-color:#ffffff;
+  }
+  100% {
+    background-color: #e3e3ea;
+
+  }
+}
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
index eb48eaef0f..13da8dce27 100644
--- a/src/dashboard/Data/Browser/BrowserTable.react.js
+++ b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -444,7 +444,9 @@ export default class BrowserTable extends React.Component {
           handleDragDrop={this.props.handleHeaderDragDrop}
           onResize={this.props.handleResize}
           onAddColumn={this.props.onAddColumn}
-          preventSchemaEdits={this.context.preventSchemaEdits} />
+          preventSchemaEdits={this.context.preventSchemaEdits}
+          isDataLoaded={!!this.props.data}
+        />
       </div>
     );
   }