From 017111d183e917b276c96992598b360d32e6d6bb Mon Sep 17 00:00:00 2001
From: Tim Chamberlain <tchamberlain76@gmail.com>
Date: Mon, 3 Oct 2022 14:39:32 -0500
Subject: [PATCH] SPRINT-12: skeleton when table loading

---
 .../pages/dashboards/Widgets/TableCard.tsx    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/qqq/pages/dashboards/Widgets/TableCard.tsx b/src/qqq/pages/dashboards/Widgets/TableCard.tsx
index b892ca6..6792e7f 100644
--- a/src/qqq/pages/dashboards/Widgets/TableCard.tsx
+++ b/src/qqq/pages/dashboards/Widgets/TableCard.tsx
@@ -19,7 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {Icon} from "@mui/material";
+import {Icon, Skeleton} from "@mui/material";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
 import Menu from "@mui/material/Menu";
@@ -152,7 +152,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
          </Grid>
          <MDBox py={1}>
             {
-               data && data.rows ? (
+               data && data.rows && data.rows.length > 0 ? (
                   <DataTable
                      table={data}
                      entriesPerPage={false}
@@ -160,8 +160,7 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
                      isSorted={false}
                      noEndBorder
                   />
-               )
-                  :
+               ) : data && data.rows && data.rows.length == 0 ? (
                   <MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
                      <MDTypography
                         variant="subtitle2"
@@ -175,6 +174,19 @@ function TableCard({title, linkText, linkURL, noRowsFoundHTML, data, dropdownOpt
                         }
                      </MDTypography>
                   </MDBox>
+               ) : (
+                  <MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
+                     <MDTypography
+                        variant="subtitle2"
+                        color="secondary"
+                        fontWeight="regular"
+                     >
+                        <Skeleton />
+                        <Skeleton />
+                        <Skeleton />
+                     </MDTypography>
+                  </MDBox>
+               )
             }
          </MDBox>
       </Card>