From cfac4c9c0cc7383e09323b1e8f3dd74ad9bda9f1 Mon Sep 17 00:00:00 2001
From: Sergio Betanzos <sbetanzos@opennebula.io>
Date: Wed, 30 Jun 2021 17:31:18 +0200
Subject: [PATCH] F OpenNebula/one#5422: Add skeleton to sunstone dashboard

---
 .../Widgets/TotalSunstoneResources.js         | 76 +++++++++++--------
 .../containers/Dashboard/Sunstone/index.js    | 29 ++++---
 2 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js b/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js
index 347d54eeb4..5a43f32177 100644
--- a/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js
+++ b/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js
@@ -7,8 +7,9 @@ import {
   NetworkAlt as NetworkIcon
 } from 'iconoir-react'
 import { makeStyles } from '@material-ui/core'
+import { Skeleton } from '@material-ui/lab'
 
-import { useUser, useGroup, useImage, useVNetwork } from 'client/features/One'
+import { RESOURCES, useOne } from 'client/features/One'
 import Count from 'client/components/Count'
 import { WavesCard } from 'client/components/Cards'
 import { T } from 'client/constants'
@@ -21,44 +22,57 @@ const useStyles = makeStyles({
   }
 })
 
-const TotalProvisionInfrastructures = () => {
+const TotalProvisionInfrastructures = ({ isLoading }) => {
   const classes = useStyles()
-  const users = useUser()
-  const groups = useGroup()
-  const images = useImage()
-  const vnetworks = useVNetwork()
+  const {
+    [RESOURCES.user]: users = [],
+    [RESOURCES.group]: groups = [],
+    [RESOURCES.image]: images = [],
+    [RESOURCES.vn]: vNetworks = []
+  } = useOne()
 
   return React.useMemo(() => (
     <div
       data-cy='dashboard-widget-total-sunstone-resources'
       className={classes.root}
     >
-      <WavesCard
-        text={T.Users}
-        value={<Count number={`${users.length}`} />}
-        bgColor='#fa7892'
-        icon={UserIcon}
-      />
-      <WavesCard
-        text={T.Groups}
-        value={<Count number={`${groups.length}`} />}
-        bgColor='#b25aff'
-        icon={GroupIcon}
-      />
-      <WavesCard
-        text={T.Images}
-        value={<Count number={`${images.length}`} />}
-        bgColor='#1fbbc6'
-        icon={ImageIcon}
-      />
-      <WavesCard
-        text={T.VirtualNetwork}
-        value={<Count number={`${vnetworks.length}`} />}
-        bgColor='#f09d42'
-        icon={NetworkIcon}
-      />
+      {!users?.length && isLoading ? (
+        <>
+          <Skeleton variant='rect' height={120} />
+          <Skeleton variant='rect' height={120} />
+          <Skeleton variant='rect' height={120} />
+          <Skeleton variant='rect' height={120} />
+        </>
+      ) : (
+        <>
+          <WavesCard
+            text={T.Users}
+            value={<Count number={`${users.length}`} />}
+            bgColor='#fa7892'
+            icon={UserIcon}
+          />
+          <WavesCard
+            text={T.Groups}
+            value={<Count number={`${groups.length}`} />}
+            bgColor='#b25aff'
+            icon={GroupIcon}
+          />
+          <WavesCard
+            text={T.Images}
+            value={<Count number={`${images.length}`} />}
+            bgColor='#1fbbc6'
+            icon={ImageIcon}
+          />
+          <WavesCard
+            text={T.VirtualNetwork}
+            value={<Count number={`${vNetworks.length}`} />}
+            bgColor='#f09d42'
+            icon={NetworkIcon}
+          />
+        </>
+      )}
     </div>
-  ), [users.length, groups.length, images.length, vnetworks.length])
+  ), [users?.length, isLoading])
 }
 
 TotalProvisionInfrastructures.displayName = 'TotalProvisionInfrastructures'
diff --git a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js b/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
index e8b7c8e11f..4000f4bb30 100644
--- a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
+++ b/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
@@ -4,28 +4,35 @@ import clsx from 'clsx'
 import { Container, Box, Grid } from '@material-ui/core'
 
 import { useAuth } from 'client/features/Auth'
-import { useUserApi, useGroupApi, useImageApi, useVNetworkApi } from 'client/features/One'
+import { useFetchAll } from 'client/hooks'
+import { useVmApi, useUserApi, useImageApi, useVNetworkApi } from 'client/features/One'
+
 import * as Widgets from 'client/components/Widgets'
 import dashboardStyles from 'client/containers/Dashboard/Provision/styles'
 
 function Dashboard () {
+  const { status, fetchRequestAll, STATUS } = useFetchAll()
+  const { INIT, PENDING } = STATUS
+
+  const { getVms } = useVmApi()
   const { getUsers } = useUserApi()
-  const { getGroups } = useGroupApi()
   const { getImages } = useImageApi()
   const { getVNetworks } = useVNetworkApi()
 
   const { settings: { disableanimations } = {} } = useAuth()
   const classes = dashboardStyles({ disableanimations })
 
-  React.useEffect(() => {
-    getUsers()
-    getGroups()
-    getImages()
-    getVNetworks()
-  }, [])
-
   const withoutAnimations = String(disableanimations).toUpperCase() === 'YES'
 
+  React.useEffect(() => {
+    fetchRequestAll([
+      getVms(),
+      getUsers(),
+      getImages(),
+      getVNetworks()
+    ])
+  }, [])
+
   return (
     <Container
       disableGutters
@@ -34,7 +41,9 @@ function Dashboard () {
       <Box py={3}>
         <Grid container spacing={3}>
           <Grid item xs={12}>
-            <Widgets.TotalSunstoneResources />
+            <Widgets.TotalSunstoneResources
+              isLoading={[INIT, PENDING].includes(status)}
+            />
           </Grid>
         </Grid>
       </Box>