From 2631b867cfb5e2931cd9e8901b62cf06bfa932ce Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Wed, 30 Jun 2021 13:48:27 +0200
Subject: [PATCH] F OpenNebula/one#5422: Add skeleton to tables

---
 .../components/Tables/Clusters/index.js       |  8 +-
 .../components/Tables/Datastores/index.js     |  8 +-
 .../components/Tables/Enhanced/styles.js      |  1 +
 .../components/Tables/Enhanced/toolbar.js     |  6 +-
 .../client/components/Tables/Groups/index.js  |  8 +-
 .../client/components/Tables/Hosts/index.js   |  8 +-
 .../client/components/Tables/Images/index.js  |  8 +-
 .../Tables/MarketplaceApps/index.js           |  8 +-
 .../components/Tables/Marketplaces/index.js   |  6 +-
 .../components/Tables/Skeleton/index.js       | 75 +++++++++++++++++++
 .../client/components/Tables/Users/index.js   |  8 +-
 .../components/Tables/VmTemplates/index.js    |  8 +-
 .../src/client/components/Tables/Vms/index.js |  6 +-
 .../src/client/components/Tables/index.js     |  2 +
 .../src/client/models/MarketplaceApp.js       |  2 +-
 15 files changed, 142 insertions(+), 20 deletions(-)
 create mode 100644 src/fireedge/src/client/components/Tables/Skeleton/index.js

diff --git a/src/fireedge/src/client/components/Tables/Clusters/index.js b/src/fireedge/src/client/components/Tables/Clusters/index.js
index 190f1c2148..30abae8bf2 100644
--- a/src/fireedge/src/client/components/Tables/Clusters/index.js
+++ b/src/fireedge/src/client/components/Tables/Clusters/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useCluster, useClusterApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import ClusterColumns from 'client/components/Tables/Clusters/columns'
 import ClusterRow from 'client/components/Tables/Clusters/row'
 
@@ -15,10 +15,14 @@ const ClustersTable = () => {
   const { getClusters } = useClusterApi()
   const { filterPool } = useAuth()
 
-  const { fetchRequest, loading, reloading } = useFetch(getClusters)
+  const { status, fetchRequest, loading, reloading } = useFetch(getClusters)
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
+  if (clusters?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Datastores/index.js b/src/fireedge/src/client/components/Tables/Datastores/index.js
index 4de17363cb..db0ee35fd6 100644
--- a/src/fireedge/src/client/components/Tables/Datastores/index.js
+++ b/src/fireedge/src/client/components/Tables/Datastores/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useDatastore, useDatastoreApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import DatastoreColumns from 'client/components/Tables/Datastores/columns'
 import DatastoreRow from 'client/components/Tables/Datastores/row'
 
@@ -15,10 +15,14 @@ const DatastoresTable = () => {
   const { getDatastores } = useDatastoreApi()
   const { filterPool } = useAuth()
 
-  const { fetchRequest, loading, reloading } = useFetch(getDatastores)
+  const { status, fetchRequest, loading, reloading } = useFetch(getDatastores)
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
+  if (datastores?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Enhanced/styles.js b/src/fireedge/src/client/components/Tables/Enhanced/styles.js
index 9e7f490ca7..134924453a 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/styles.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/styles.js
@@ -23,6 +23,7 @@ export default makeStyles(({ palette, typography, breakpoints }) => ({
     flexShrink: 0,
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'end',
     gap: '1em'
   },
   loading: {
diff --git a/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js b/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js
index de79684ba1..6b9b0fd8fa 100644
--- a/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js
+++ b/src/fireedge/src/client/components/Tables/Enhanced/toolbar.js
@@ -18,9 +18,13 @@ const Toolbar = ({ useTableProps }) => {
   const classes = useToolbarStyles()
   const isMobile = useMediaQuery(theme => theme.breakpoints.down('sm'))
 
+  if (isMobile) {
+    return null
+  }
+
   return (
     <div className={classes.root}>
-      {!isMobile && <GlobalSort useTableProps={useTableProps} />}
+      <GlobalSort useTableProps={useTableProps} />
     </div>
   )
 }
diff --git a/src/fireedge/src/client/components/Tables/Groups/index.js b/src/fireedge/src/client/components/Tables/Groups/index.js
index 1cb62ed97a..fd2810a43e 100644
--- a/src/fireedge/src/client/components/Tables/Groups/index.js
+++ b/src/fireedge/src/client/components/Tables/Groups/index.js
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { useFetch } from 'client/hooks'
 import { useGroup, useGroupApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import GroupColumns from 'client/components/Tables/Groups/columns'
 import GroupRow from 'client/components/Tables/Groups/row'
 
@@ -13,10 +13,14 @@ const GroupsTable = () => {
   const groups = useGroup()
   const { getGroups } = useGroupApi()
 
-  const { fetchRequest, loading, reloading } = useFetch(getGroups)
+  const { status, fetchRequest, loading, reloading } = useFetch(getGroups)
 
   useEffect(() => { fetchRequest() }, [])
 
+  if (groups?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Hosts/index.js b/src/fireedge/src/client/components/Tables/Hosts/index.js
index 0a96404f8b..23d54ac12b 100644
--- a/src/fireedge/src/client/components/Tables/Hosts/index.js
+++ b/src/fireedge/src/client/components/Tables/Hosts/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useHost, useHostApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import HostColumns from 'client/components/Tables/Hosts/columns'
 import HostRow from 'client/components/Tables/Hosts/row'
 import HostDetail from 'client/components/Tables/Hosts/detail'
@@ -16,10 +16,14 @@ const HostsTable = () => {
   const { getHosts } = useHostApi()
   const { filterPool } = useAuth()
 
-  const { fetchRequest, loading, reloading } = useFetch(getHosts)
+  const { status, fetchRequest, loading, reloading } = useFetch(getHosts)
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
+  if (hosts?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Images/index.js b/src/fireedge/src/client/components/Tables/Images/index.js
index 841fac853a..586fbde93a 100644
--- a/src/fireedge/src/client/components/Tables/Images/index.js
+++ b/src/fireedge/src/client/components/Tables/Images/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useImage, useImageApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import ImageColumns from 'client/components/Tables/Images/columns'
 import ImageRow from 'client/components/Tables/Images/row'
 import ImageDetail from 'client/components/Tables/Images/detail'
@@ -16,10 +16,14 @@ const ImagesTable = () => {
   const { getImages } = useImageApi()
   const { filterPool } = useAuth()
 
-  const { fetchRequest, loading, reloading } = useFetch(getImages)
+  const { status, fetchRequest, loading, reloading } = useFetch(getImages)
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
+  if (images?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
index b8200c0bc1..a7c27b49c6 100644
--- a/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/components/Tables/MarketplaceApps/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useMarketplaceApp, useMarketplaceAppApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import MarketplaceAppColumns from 'client/components/Tables/MarketplaceApps/columns'
 import MarketplaceAppRow from 'client/components/Tables/MarketplaceApps/row'
 
@@ -15,10 +15,14 @@ const MarketplaceAppsTable = () => {
   const { getMarketplaceApps } = useMarketplaceAppApi()
   const { filterPool } = useAuth()
 
-  const { fetchRequest, loading, reloading } = useFetch(getMarketplaceApps)
+  const { status, fetchRequest, loading, reloading } = useFetch(getMarketplaceApps)
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
+  if (marketplaceApps?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Marketplaces/index.js b/src/fireedge/src/client/components/Tables/Marketplaces/index.js
index 76a534b382..8cd3a1f882 100644
--- a/src/fireedge/src/client/components/Tables/Marketplaces/index.js
+++ b/src/fireedge/src/client/components/Tables/Marketplaces/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useMarketplace, useMarketplaceApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import MarketplaceColumns from 'client/components/Tables/Marketplaces/columns'
 import MarketplaceRow from 'client/components/Tables/Marketplaces/row'
 
@@ -19,6 +19,10 @@ const MarketplacesTable = () => {
 
   useEffect(() => { fetchRequest() }, [filterPool])
 
+  if (marketplaces?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Skeleton/index.js b/src/fireedge/src/client/components/Tables/Skeleton/index.js
new file mode 100644
index 0000000000..633fac9e0b
--- /dev/null
+++ b/src/fireedge/src/client/components/Tables/Skeleton/index.js
@@ -0,0 +1,75 @@
+import * as React from 'react'
+
+import { Skeleton } from '@material-ui/lab'
+import { useMediaQuery, Card } from '@material-ui/core'
+
+import EnhancedTableStyles from 'client/components/Tables/Enhanced/styles'
+import { rowStyles } from 'client/components/Tables/styles'
+
+const SkeletonTable = React.memo(() => {
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('sm'))
+  const classes = EnhancedTableStyles()
+  const rowClasses = rowStyles()
+
+  const SkeletonCategory = ({ numberOfItems = 1 }) => (
+    <>
+      <Skeleton width={'30%'} height={40} />
+      {[...new Array(numberOfItems)].map((_, idx) => (
+        <Skeleton key={idx} width={'80%'} height={40} />
+      ))}
+    </>
+  )
+
+  const SkeletonRow = () => (
+    <Card style={{ padding: '1em' }}>
+      <div className={rowClasses.main}>
+        <div className={rowClasses.title}>
+          <Skeleton width={'40%'} height={30} />
+        </div>
+        <div className={rowClasses.caption}>
+          <Skeleton width={'10%'} height={20} />
+          <Skeleton width={'10%'} height={20} />
+          <Skeleton width={'10%'} height={20} />
+        </div>
+      </div>
+    </Card>
+  )
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.toolbar}>
+        {!isMobile && <Skeleton variant='rect' height={35} width={100} />}
+        <div className={classes.pagination}>
+          <Skeleton variant='rect' height={35} width={85} />
+          <Skeleton variant='rect' height={35} width={85} />
+          <Skeleton variant='rect' height={35} width={85} />
+        </div>
+      </div>
+      <div className={classes.table}>
+        {isMobile ? (
+          <Skeleton variant='rect' height={40} style={{ marginBottom: '1em' }} />
+        ) : (
+          <Card variant='outlined' style={{ padding: '1em' }}>
+            <Skeleton variant='rect' height={40} style={{ marginBottom: '1em' }} />
+            <div>
+              <SkeletonCategory />
+              <SkeletonCategory numberOfItems={3} />
+            </div>
+          </Card>
+        )}
+        <div className={classes.body}>
+          <SkeletonRow />
+          <SkeletonRow />
+          <SkeletonRow />
+          <SkeletonRow />
+          <SkeletonRow />
+        </div>
+      </div>
+    </div>
+
+  )
+})
+
+SkeletonTable.displayName = 'SkeletonTable'
+
+export default SkeletonTable
diff --git a/src/fireedge/src/client/components/Tables/Users/index.js b/src/fireedge/src/client/components/Tables/Users/index.js
index a2d57e9205..c1899e52f3 100644
--- a/src/fireedge/src/client/components/Tables/Users/index.js
+++ b/src/fireedge/src/client/components/Tables/Users/index.js
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { useFetch } from 'client/hooks'
 import { useUser, useUserApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import UserColumns from 'client/components/Tables/Users/columns'
 import UserRow from 'client/components/Tables/Users/row'
 
@@ -13,10 +13,14 @@ const UsersTable = () => {
   const users = useUser()
   const { getUsers } = useUserApi()
 
-  const { fetchRequest, loading, reloading } = useFetch(getUsers)
+  const { status, fetchRequest, loading, reloading } = useFetch(getUsers)
 
   useEffect(() => { fetchRequest() }, [])
 
+  if (users?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/VmTemplates/index.js b/src/fireedge/src/client/components/Tables/VmTemplates/index.js
index 80ee0823ea..eb57abc7a0 100644
--- a/src/fireedge/src/client/components/Tables/VmTemplates/index.js
+++ b/src/fireedge/src/client/components/Tables/VmTemplates/index.js
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { useFetch } from 'client/hooks'
 import { useVmTemplate, useVmTemplateApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import VmTemplateColumns from 'client/components/Tables/VmTemplates/columns'
 import VmTemplateRow from 'client/components/Tables/VmTemplates/row'
 import VmTemplateDetail from 'client/components/Tables/VmTemplates/detail'
@@ -14,10 +14,14 @@ const VmTemplatesTable = () => {
   const vmTemplates = useVmTemplate()
   const { getVmTemplates } = useVmTemplateApi()
 
-  const { fetchRequest, loading, reloading } = useFetch(getVmTemplates)
+  const { status, fetchRequest, loading, reloading } = useFetch(getVmTemplates)
 
   useEffect(() => { fetchRequest() }, [])
 
+  if (vmTemplates?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js
index 17ef41c3ad..2e241c66f9 100644
--- a/src/fireedge/src/client/components/Tables/Vms/index.js
+++ b/src/fireedge/src/client/components/Tables/Vms/index.js
@@ -4,7 +4,7 @@ import { useAuth } from 'client/features/Auth'
 import { useFetch } from 'client/hooks'
 import { useVm, useVmApi } from 'client/features/One'
 
-import { EnhancedTable } from 'client/components/Tables'
+import { SkeletonTable, EnhancedTable } from 'client/components/Tables'
 import VmColumns from 'client/components/Tables/Vms/columns'
 import VmRow from 'client/components/Tables/Vms/row'
 import VmDetail from 'client/components/Tables/Vms/detail'
@@ -43,6 +43,10 @@ const VmsTable = () => {
     requests[status]?.()
   }, [filterPool, status, data])
 
+  if (vms?.length === 0 && ['INIT', 'PENDING'].includes(status)) {
+    return <SkeletonTable />
+  }
+
   return (
     <EnhancedTable
       columns={columns}
diff --git a/src/fireedge/src/client/components/Tables/index.js b/src/fireedge/src/client/components/Tables/index.js
index 87bd5763f7..3ff6049e7f 100644
--- a/src/fireedge/src/client/components/Tables/index.js
+++ b/src/fireedge/src/client/components/Tables/index.js
@@ -6,12 +6,14 @@ import HostsTable from 'client/components/Tables/Hosts'
 import ImagesTable from 'client/components/Tables/Images'
 import MarketplaceAppsTable from 'client/components/Tables/MarketplaceApps'
 import MarketplacesTable from 'client/components/Tables/Marketplaces'
+import SkeletonTable from 'client/components/Tables/Skeleton'
 import UsersTable from 'client/components/Tables/Users'
 import VirtualizedTable from 'client/components/Tables/Virtualized'
 import VmsTable from 'client/components/Tables/Vms'
 import VmTemplatesTable from 'client/components/Tables/VmTemplates'
 
 export {
+  SkeletonTable,
   EnhancedTable,
   VirtualizedTable,
 
diff --git a/src/fireedge/src/client/models/MarketplaceApp.js b/src/fireedge/src/client/models/MarketplaceApp.js
index 970f7ec795..36e59828db 100644
--- a/src/fireedge/src/client/models/MarketplaceApp.js
+++ b/src/fireedge/src/client/models/MarketplaceApp.js
@@ -33,4 +33,4 @@ const MARKETPLACE_APP_STATES = [
 
 export const getType = ({ TYPE = 0 } = {}) => MARKETPLACE_APP_TYPES[+TYPE]
 
-export const getState = ({ STATE } = {}) => MARKETPLACE_APP_STATES[+STATE]
+export const getState = ({ STATE = 0 } = {}) => MARKETPLACE_APP_STATES[+STATE]