minor spacing stuff

src/component/ComponentHistory.tsx

@@ -33,7 +33,7 @@ export default function ComponentHistory(props: Props) {
             offset: or(res.data.nextOffset, 0)
           });
         })
-        .catch((err: any) => {
+        .catch((_err: any) => {
           resolve({
             records: [] as Record[],
             total: 0,

src/device/DevicesSummary.tsx

@@ -88,38 +88,34 @@ export default function DevicesSummary(props: Props) {
   return (
     <Grid2 container spacing={1} marginBlock={1} >
       <Grid2 size={{xs: 6, sm: 3}}>
-        {loadingStats ? 
-          <Skeleton className={classes.card} />
-        :
-          <Card 
-            className={
-              classNames(
-                classes.card, 
-                selected==="total" ? classes.cardSelected : undefined
-              )
-            } 
-            onClick={() => setSelected("total")}
-          >
-            <Grid2 container spacing={1} justifyContent={"center"} alignItems={"center"} >
-              <Grid2>
-                <CircleGraphIcon 
-                  sx={{ marginRight: 1, marginLeft: 1 }} 
-                  progress={100} 
-                  color={"info"}
-                  icon={<AutoAwesomeMosaic />}
-                />
-              </Grid2>
-              <Grid2 marginRight={1}>
-                <Typography variant="h6" >
-                  {stats.total} Devices
-                </Typography>
-                <Typography variant="subtitle2" color="textSecondary">
-                  Total
-                </Typography>
-              </Grid2>
+        <Card 
+          className={
+            classNames(
+              classes.card, 
+              selected==="total" ? classes.cardSelected : undefined
+            )
+          } 
+          onClick={() => setSelected("total")}
+        >
+          <Grid2 container spacing={1} justifyContent={"center"} alignItems={"center"} >
+            <Grid2>
+              <CircleGraphIcon 
+                sx={{ marginRight: 1, marginLeft: 1 }} 
+                progress={100} 
+                color={"info"}
+                icon={<AutoAwesomeMosaic />}
+              />
             </Grid2>
-          </Card>
-        }
+            <Grid2 marginRight={1}>
+              <Typography variant="h6" >
+                {stats.total} Devices
+              </Typography>
+              <Typography variant="subtitle2" color="textSecondary">
+                Total
+              </Typography>
+            </Grid2>
+          </Grid2>
+        </Card>
       </Grid2>
       <Grid2 size={{xs: 6, sm: 3}}>
         <Card 

src/pages/DeviceHistory.tsx

@@ -1,7 +1,6 @@
 import { 
   Box, 
   Theme, 
-  Toolbar 
 } from "@mui/material";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import { useDeviceAPI, useSnackbar } from "hooks";

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon } from "@mui/icons-material";
-import { Box, Chip, CircularProgress, IconButton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
+import { Box, Chip, CircularProgress, IconButton, Skeleton, Tab, Tabs, Theme, Tooltip, Typography } from "@mui/material";
 import { blue, green } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -263,8 +263,8 @@ export default function Devices() {
       {
         title: "ID",
         render: device => <span className={classes.cellContainer}>
-            {device.settings?.deviceId}
-          </span>
+          {device.settings?.deviceId}
+        </span>
       },
       {
         title: "Device",
@@ -354,7 +354,7 @@ export default function Devices() {
         >
           <Tab wrapped value={"all"} label="All" />
           {groupsLoading ? 
-            <Tab value={"loading"} label={<CircularProgress />}/>
+            <Tab value={"loading"} label={<Skeleton variant="rectangular" height={24} width={128} animation="pulse" />}/>
           : groups.map((group, index) => {
             if (group.id()) return (
               <Tab className={classes.tab} wrapped value={group.id().toString()} label={<Typography variant="inherit" noWrap>{group.name()}</Typography>} key={"group-tab-"+index}/>