Merge pull request #120 from mahos/loading

Add loading animations

Author: Synicix

CHANGELOG.md

@@ -7,6 +7,7 @@ Observes [Semantic Versioning](https://semver.org/spec/v2.0.0.html) standard and
 - Added case insensitive behavior to schema and table search box (#99) PR #102
 - CSS for making the primary keys look disabled/readonly for update mode PR #105
 - Added number of tuples input box for fetch table viewing PR #117
+- Added loading animation to table list load, table content load, and table action wait time (#107) PR #120
 
 ### Fixed
 - Fixed bug of delete with datetime in primarykey crashing PR #105

src/Components/LoadingAnimation/BasicLoadingIcon.css

@@ -0,0 +1,28 @@
+.loadingOverlay {
+  position: absolute;
+  z-index: 900;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f1f1f1;
+}
+
+.basicLoadingIcon {
+  position: relative;
+  border-radius: 50%;
+  border: 12px solid #92C3C9; /* container: LabBook Logo muted lightest blue shade */
+  border-top: 12px solid #53A6B7; /* spinning thing inside container: LabBook logo bright blue shade */
+  border-right: 12px solid #8CBAC0;
+  border-bottom: 12px solid #86B2B8;
+  border-left: 12px solid #57ADBE; /* spinning thing inside container: LabBook logo brightest blue shade */
+  animation: loaderSpin 1.5s linear infinite;
+}
+
+@keyframes loaderSpin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

src/Components/LoadingAnimation/BasicLoadingIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './BasicLoadingIcon.css';
+
+/**
+ * Basic Loading Icon component that shows up when user is waiting for something to load
+ */
+class BasicLoadingIcon extends React.Component<{size:number}> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  iconStyle = {
+    width: this.props.size + 'px',
+    height: this.props.size + 'px',
+    marginTop: -(this.props.size / 2) + 'px'
+  }
+
+  render() {
+    return (
+      <div className="loadingOverlay">
+        <div className="basicLoadingIcon" style={this.iconStyle}></div>
+      </div>
+    )
+  }
+}
+export default BasicLoadingIcon;

src/Components/LoadingAnimation/TableListLoading.css

@@ -0,0 +1,66 @@
+.tableListSkeletons {
+  position: relative;
+  width: 100%;
+  height: 96%;
+  margin-bottom: 4%;
+  border: 1px solid lightgray;
+}
+
+.tableSkeleton {
+  box-sizing: border-box;
+  min-width: 100%;
+  border: 1px solid rgba(128, 128, 128, 0.5);
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 4px;
+}
+
+.tableTierLabelSkeleton {
+  box-sizing: border-box;
+  position: absolute;
+  top: 4px;
+  left: 6px;
+  height: 0.9rem;
+  width: 20%;
+  border-radius: 4px;
+  background-color: lightgray;
+}
+
+.tableNameSkeleton {
+  margin: 22px 4px 4px 4px;
+  height: 1.1rem;
+  width: 70%;
+  background-color: lightgray;
+  border-radius: 4px;
+}
+
+.tableNameSkeleton::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -100%;
+  height: 1.1rem;
+  width: 70%;
+  background: linear-gradient(to right, transparent 0%, #FFF 50%, transparent 100%);
+  animation: load 1.8s ease-in-out infinite;
+}
+
+.tableTierLabelSkeleton::before {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -100%;
+  height: 0.9rem;
+  width: 100%;
+  background: linear-gradient(to right, transparent 0%, #FFF 50%, transparent 100%);
+  animation: load 1s ease-in-out infinite;
+}
+
+@keyframes load {
+  from {
+      left: -75%;
+  }
+  to   {
+      left: 75%;
+  }
+}

src/Components/LoadingAnimation/TableListLoading.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './TableListLoading.css';
+
+/**
+ * Empty table list loading component that shows up when user is waiting for the table list
+ */
+class TableListLoading extends React.Component {
+  constructor(props: any) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="tableListSkeletons">
+      {[...Array(14)].map((value: undefined, index: number) => {
+        return (
+          <div className="tableSkeleton" key={index}>
+            <div className="tableTierLabelSkeleton"></div>
+            <div className="tableNameSkeleton"></div>
+          </div>
+          )
+        })
+      }
+      </div>
+    )
+  }
+}
+export default TableListLoading;

src/Components/MainTableView/DeleteTuple/DeleteTuple.tsx

@@ -15,7 +15,6 @@ type deleteTupleState = {
   dependencies: Array<any>, // list of dependencies fetched from API
   deleteStatusMessage: string, // for GUI to show
   isGettingDependencies: boolean, // for loading animation status
-  isDeletingEntry: boolean // for loading animation status
   deleteAccessible: boolean // valdiation result of accessibility from check dependency component
 }
 
@@ -26,7 +25,8 @@ class DeleteTuple extends React.Component<{
     tableAttributesInfo?: TableAttributesInfo, 
     fetchTableContent: any, 
     clearEntrySelection: any,
-    selectedTableEntry?: any
+    selectedTableEntry?: any,
+    deleteInAction: any // for loading animation status
   },
   deleteTupleState> {
   constructor(props: any) {
@@ -35,7 +35,6 @@ class DeleteTuple extends React.Component<{
       dependencies: [],
       deleteStatusMessage: '',
       isGettingDependencies: false,
-      isDeletingEntry: false,
       deleteAccessible: false,
     }
 
@@ -89,7 +88,7 @@ class DeleteTuple extends React.Component<{
     }
 
     // set status true for deleting entry, switch to false once api responds
-    this.setState({isDeletingEntry: true})
+    this.props.deleteInAction(true)
 
     // TODO: Run api fetch for list of dependencies/permission
     fetch(`${process.env.REACT_APP_DJLABBOOK_BACKEND_PREFIX}/delete_tuple`, {
@@ -99,7 +98,8 @@ class DeleteTuple extends React.Component<{
     })
       .then(result => {
         // set deleting status to done
-        this.setState({isDeletingEntry: false, dependencies: []})
+        this.setState({dependencies: []})
+        this.props.deleteInAction(false)
 
         // Check for error mesage 500, if so throw error - shouldn't happen as often once real dependency check is in place
         if (result.status === 500 || result.status === 409) {
@@ -126,6 +126,7 @@ class DeleteTuple extends React.Component<{
 
       })
       .catch(error => {
+        this.props.deleteInAction(false);
         this.setState({deleteStatusMessage: error.message});
       })
   }
@@ -184,7 +185,6 @@ class DeleteTuple extends React.Component<{
             <button className="cancelActionButton" onClick={() => {this.setState({dependencies: []}); this.props.clearEntrySelection();}}>Cancel</button>
           </div>
           <div className="deleting">
-          {this.state.isDeletingEntry ? <p>Deleting entry might take a while...</p>: '' } {/* TODO: replace with proper animation */}
           {this.state.deleteStatusMessage ? (
             <div className="errorMessage">{this.state.deleteStatusMessage}<button className="dismiss" onClick={() => this.setState({deleteStatusMessage: ''})}>dismiss</button></div>
           ) : ''}

src/Components/MainTableView/InsertTuple/InsertTuple.tsx

@@ -30,7 +30,9 @@ class InsertTuple extends React.Component<{
     tableAttributesInfo?: TableAttributesInfo, 
     fetchTableContent: any, 
     clearEntrySelection: any, 
-    selectedTableEntry?: any}, 
+    selectedTableEntry?: any,
+    insertInAction: any // for loading/waiting animation while insert takes place
+  }, 
   insertTupleState> {
 
   constructor(props: any) {
@@ -155,13 +157,17 @@ class InsertTuple extends React.Component<{
       }
     }
 
+    // start insert in action wait animation and stop when api responds
+    this.props.insertInAction(true);
+
     // All checks passed thus attempt insert
     fetch(`${process.env.REACT_APP_DJLABBOOK_BACKEND_PREFIX}/insert_tuple`, {
       method: 'POST',
       headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + this.props.token},
       body: JSON.stringify({schemaName: this.props.selectedSchemaName, tableName: this.props.selectedTableName, tuple: tupleBuffer})
     })
     .then(result => {
+      this.props.insertInAction(false);
       // Check for error mesage 500, if so throw and error
       if (result.status === 500) {
         result.text()
@@ -179,6 +185,7 @@ class InsertTuple extends React.Component<{
       this.props.fetchTableContent();
     })
     .catch((error) => {
+      this.props.insertInAction(false);
       this.setState({errorMessage: error.message});
     })
   }

src/Components/MainTableView/TableContent.css

@@ -215,4 +215,35 @@ input[type="checkbox"][disabled] {
 .number-of-rows-per-page-input input{
   margin-left: 20px;
   width: 40px;
+}
+
+.loadingBackdrop {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.7);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 900;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loadingPopup {
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 2px;
+  width: 300px;
+  height: 200px;
+  color: #262A22;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loadingPopup p {
+  position: absolute;
+  z-index: 999;
+  bottom: 16px;
 }