From e9a75726a9073b8944c75137ab6044a33d00f160 Mon Sep 17 00:00:00 2001
From: Clumsy-Coder <19594044+Clumsy-Coder@users.noreply.github.com>
Date: Wed, 21 Sep 2022 18:40:00 -0600
Subject: [PATCH] feat(component): render Skeleton for component 'Summary' when
 loading data

  ## what
  - Render skeleton when loading data

  ## how
  - Use Material-ui `Grid` to arrange elements
  - Use `Box` to define a element container with a defined height
  - Use `Skeleton` to render loading component

  ## why
  - its for better readability

  ## where
  - ./src/components/Summary/index.tsx

  ## usage
---
 src/components/Summary/index.tsx | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/Summary/index.tsx b/src/components/Summary/index.tsx
index 05c104f3..0a5d2574 100644
--- a/src/components/Summary/index.tsx
+++ b/src/components/Summary/index.tsx
@@ -1,7 +1,9 @@
+import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import { green, blue, red, orange } from '@mui/material/colors';
 import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
 
 import { ISummary } from '@utils/url/upstream.types';
@@ -36,8 +38,35 @@ const Summary: React.FC<Props> = (props: Props) => {
     unique_clients: uniqueClients,
   } = data;
 
+  if (isLoading) {
+    return (
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={3} sm={6}>
+          <Box sx={{ height: 117 }}>
+            <Skeleton variant='rounded' height='inherit' />
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={3} sm={6}>
+          <Box sx={{ height: 117 }}>
+            <Skeleton variant='rounded' height='inherit' />
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={3} sm={6}>
+          <Box sx={{ height: 117 }}>
+            <Skeleton variant='rounded' height='inherit' />
+          </Box>
+        </Grid>
+        <Grid item xs={12} md={3} sm={6}>
+          <Box sx={{ height: 117 }}>
+            <Skeleton variant='rounded' height='inherit' />
+          </Box>
+        </Grid>
+      </Grid>
+    );
+  }
+
   return (
-    <Grid container spacing={1}>
+    <Grid container spacing={2}>
       <Grid item xs={12} sm={6} md={3}>
         <Card sx={{ backgroundColor: green[900] }}>
           <CardContent>