feat: add loading animation

gwynndp · Jun 20, 2022 · 4b63802 · 4b63802
1 parent b2d7f7a
commit 4b63802
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 54 deletions.
diff --git a/src/components/Stakeholders/StakeholderDetail/LinkStakeholder.js b/src/components/Stakeholders/StakeholderDetail/LinkStakeholder.js
@@ -2,6 +2,7 @@ import React, { useState, useContext, useEffect } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Button,
+  CircularProgress,
   Dialog,
   DialogTitle,
   DialogContent,
@@ -24,16 +25,26 @@ const useStyles = makeStyles({
     padding: 8,
     border: '1px solid rgba(0,0,0,0.1)',
   },
+  placeholder: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    height: '60vh',
+    width: '100vw',
+  },
   tall: {
     height: 300,
   },
 });
 
 function LinkStakeholder({ id, type }) {
   const classes = useStyles();
-  const { unlinkedStakeholders, getUnlinkedStakeholders } = useContext(
-    StakeholdersContext,
-  );
+  const {
+    isLoading,
+    unlinkedStakeholders,
+    getUnlinkedStakeholders,
+  } = useContext(StakeholdersContext);
   const [open, setOpen] = useState(false);
   const [filteredStakeholders, setFilteredStakeholders] = useState(
     unlinkedStakeholders,
@@ -88,7 +99,12 @@ function LinkStakeholder({ id, type }) {
         <DialogTitle>Link Stakeholder</DialogTitle>
         <DialogContent>
           <List className={`${classes.listBox} ${classes.tall}`}>
-            {filteredStakeholders &&
+            {isLoading ? (
+              <div className={classes.placeholder}>
+                <CircularProgress id="loading" />
+              </div>
+            ) : (
+              filteredStakeholders &&
               filteredStakeholders.map((stakeholder) => {
                 return (
                   <StakeholderList
@@ -100,7 +116,8 @@ function LinkStakeholder({ id, type }) {
                     onLinkUpdate={onLinkUpdate}
                   ></StakeholderList>
                 );
-              })}
+              })
+            )}
           </List>
         </DialogContent>
         <DialogActions>

diff --git a/src/components/Stakeholders/Table.js b/src/components/Stakeholders/Table.js
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
-import StakeholderDetail from './StakeholderDetail';
+import { makeStyles } from '@material-ui/core/styles';
 import {
+  CircularProgress,
   Paper,
   TableContainer,
   Table,
@@ -11,17 +12,31 @@ import {
   TableSortLabel,
   TablePagination,
 } from '@material-ui/core';
+import StakeholderDetail from './StakeholderDetail';
 import { StakeholdersContext } from '../../context/StakeholdersContext';
 
+const useStyles = makeStyles({
+  placeholder: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    height: '60vh',
+    width: '100vw',
+  },
+});
+
 function StakeholderTable() {
+  const classes = useStyles();
   const {
     stakeholders,
     count,
     columns,
+    isLoading,
     page,
-    rowsPerPage,
     orderBy,
     order,
+    rowsPerPage,
     setPage,
     setRowsPerPage,
     sort,
@@ -42,54 +57,61 @@ function StakeholderTable() {
 
   return (
     <>
-      <TableContainer component={Paper}>
-        <Table aria-label="collapsible table">
-          <TableHead>
-            <TableRow>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.value}
-                  onClick={() => handleSort(col.value, !order)}
-                >
-                  <TableSortLabel
-                    active={col.value === !!orderBy}
-                    direction={order ? 'asc' : 'desc'}
+      {isLoading ? (
+        <div className={classes.placeholder}>
+          <CircularProgress id="loading" />
+        </div>
+      ) : (
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableHead>
+              <TableRow>
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.value}
+                    onClick={() => handleSort(col.value, !order)}
                   >
-                    {col.label}
-                  </TableSortLabel>
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {stakeholders &&
-              stakeholders.map((stakeholder) => (
-                <React.Fragment key={stakeholder.id}>
-                  {/* Main stakeholder */}
-                  <StakeholderDetail row={stakeholder} columns={columns} />
-                  {stakeholder.children &&
-                    stakeholder.children.map((child) => (
-                      <StakeholderDetail
-                        key={child.id}
-                        row={child}
-                        columns={columns}
-                        child
-                      />
-                    ))}
-                </React.Fragment>
-              ))}
-          </TableBody>
-        </Table>
-        <TablePagination
-          component="div"
-          rowsPerPage={rowsPerPage}
-          rowsPerPageOptions={[5, 10, 20]}
-          onChangeRowsPerPage={handleRowsPerPageChange}
-          count={count}
-          page={page}
-          onChangePage={handlePageChange}
-        />
-      </TableContainer>
+                    <TableSortLabel
+                      active={col.value === !!orderBy}
+                      direction={order ? 'asc' : 'desc'}
+                    >
+                      {col.label}
+                    </TableSortLabel>
+                  </TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+
+            <TableBody>
+              {stakeholders &&
+                stakeholders.map((stakeholder) => (
+                  <React.Fragment key={stakeholder.id}>
+                    {/* Main stakeholder */}
+                    <StakeholderDetail row={stakeholder} columns={columns} />
+                    {stakeholder.children &&
+                      stakeholder.children.map((child) => (
+                        <StakeholderDetail
+                          key={child.id}
+                          row={child}
+                          columns={columns}
+                          child
+                        />
+                      ))}
+                  </React.Fragment>
+                ))}
+            </TableBody>
+          </Table>
+          <TablePagination
+            component="div"
+            rowsPerPage={rowsPerPage}
+            rowsPerPageOptions={[5, 10, 15]}
+            onChangeRowsPerPage={handleRowsPerPageChange}
+            count={count}
+            page={page}
+            onChangePage={handlePageChange}
+          />
+        </TableContainer>
+      )}
     </>
   );
 }