F OpenNebula/one#5422: Add skeleton to tables

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}

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}

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: {

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>
   )
 }

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}

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}

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}

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}

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}

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

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}

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}

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}

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,
 

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]