feat: show skeleton as loading indicator in data browser while data i…

…s loading (#2273)
parse-community · Sep 17, 2022 · 059f616 · 059f616
1 parent e1d8e5b
commit 059f616
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
     );
   }