fixes for allback

client/src/components/design-elements/Fallback.tsx

@@ -1,4 +1,3 @@
-import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import SkeletonCard from "@/components/design-elements/SkeletonCard";
 import Typography from "@mui/material/Typography";
@@ -32,7 +31,7 @@ export const BaseFallback: React.FC<BaseFallbackProps> = ({
         lg: "50%",
         xl: "40%",
       }}
-      padding={{ xs: theme.spacing(4), md: theme.spacing(16) }}
+      padding={{ xs: theme.spacing(8), md: theme.spacing(16) }}
       bgcolor={theme.palette.primary.main}
       border={1}
       borderColor={theme.palette.primary.lowContrast}
@@ -42,14 +41,7 @@ export const BaseFallback: React.FC<BaseFallbackProps> = ({
       }}
       {...props}
     >
-      <Box
-        mt={theme.spacing(32)}
-        mb={theme.spacing(8)}
-        width={"80%"}
-        maxWidth={216}
-      >
-        <SkeletonCard showHalo={true} />
-      </Box>
+      <SkeletonCard showHalo={true} />
       {children}
     </Stack>
   );

client/src/components/design-elements/SkeletonCard.tsx

@@ -12,7 +12,7 @@ interface SkeletonCardProps {
  * Default size is 60% of original design
  */
 const SkeletonCard: React.FC<SkeletonCardProps> = ({
-  width = "100%",
+  width = 216,
   showHalo = true,
 }) => {
   const theme = useTheme();
@@ -66,7 +66,7 @@ const SkeletonCard: React.FC<SkeletonCardProps> = ({
   };
 
   return (
-    <Box sx={{ position: "relative" }}>
+    <Box sx={{ position: "relative", mt: 20 }}>
       {showHalo && (
         <Box
           sx={{

client/src/pages/pagespeed/PageSpeedMonitors.tsx

@@ -77,7 +77,7 @@ const PageSpeedMonitorsPage = () => {
   return (
     <MonitorBasePageWithStates
       loading={isValidating}
-      error={true}
+      error={error}
       items={monitors}
       page="pageSpeed"
       actionLink="/pagespeed/create"