From 93ec7af3f7c87f6301cd5d83a75576bc4611cfc4 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Tue, 1 Jul 2025 16:20:15 -0400
Subject: [PATCH] Fix image loading skeleton

---
 src/apps/dashboard/routes/plugins/plugin.tsx |  8 +--
 src/components/Image.tsx                     | 61 ++++++++++----------
 src/components/LoadingSkeleton.tsx           | 18 ++++++
 3 files changed, 53 insertions(+), 34 deletions(-)
 create mode 100644 src/components/LoadingSkeleton.tsx

diff --git a/src/apps/dashboard/routes/plugins/plugin.tsx b/src/apps/dashboard/routes/plugins/plugin.tsx
index 9da0a8a9cb..e847b9385e 100644
--- a/src/apps/dashboard/routes/plugins/plugin.tsx
+++ b/src/apps/dashboard/routes/plugins/plugin.tsx
@@ -64,13 +64,13 @@ const PluginPage: FC = () => {
     const {
         data: configurationPages,
         isError: isConfigurationPagesError,
-        isLoading: isConfigurationPagesLoading
+        isPending: isConfigurationPagesLoading
     } = useConfigurationPages();
 
     const {
         data: packageInfo,
         isError: isPackageInfoError,
-        isLoading: isPackageInfoLoading
+        isPending: isPackageInfoLoading
     } = usePackageInfo(pluginName ? {
         name: pluginName,
         assemblyGuid: pluginId
@@ -78,8 +78,8 @@ const PluginPage: FC = () => {
 
     const {
         data: plugins,
-        isLoading: isPluginsLoading,
-        isError: isPluginsError
+        isError: isPluginsError,
+        isPending: isPluginsLoading
     } = usePlugins();
 
     const isLoading =
diff --git a/src/components/Image.tsx b/src/components/Image.tsx
index 84f7927223..7ab0effe93 100644
--- a/src/components/Image.tsx
+++ b/src/components/Image.tsx
@@ -2,9 +2,10 @@ import type { SvgIconComponent } from '@mui/icons-material';
 import ImageNotSupported from '@mui/icons-material/ImageNotSupported';
 import Box from '@mui/material/Box/Box';
 import Paper from '@mui/material/Paper/Paper';
-import Skeleton from '@mui/material/Skeleton/Skeleton';
 import React, { type FC } from 'react';
 
+import { LoadingSkeleton } from './LoadingSkeleton';
+
 interface ImageProps {
     isLoading: boolean
     alt?: string
@@ -30,36 +31,36 @@ const Image: FC<ImageProps> = ({
             overflow: 'hidden'
         }}
     >
-        {isLoading && (
-            <Skeleton
-                variant='rectangular'
-                width='100%'
-                height='100%'
-            />
-        )}
-        {url ? (
-            <img
-                src={url}
-                alt={alt}
-                width='100%'
-            />
-        ) : (
-            <Box
-                sx={{
-                    height: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                }}
-            >
-                <FallbackIcon
-                    sx={{
-                        height: '25%',
-                        width: 'auto'
-                    }}
+        <LoadingSkeleton
+            isLoading={isLoading}
+            variant='rectangular'
+            width='100%'
+            height='100%'
+        >
+            {url ? (
+                <img
+                    src={url}
+                    alt={alt}
+                    width='100%'
                 />
-            </Box>
-        )}
+            ) : (
+                <Box
+                    sx={{
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
+                >
+                    <FallbackIcon
+                        sx={{
+                            height: '25%',
+                            width: 'auto'
+                        }}
+                    />
+                </Box>
+            )}
+        </LoadingSkeleton>
     </Paper>
 );
 
diff --git a/src/components/LoadingSkeleton.tsx b/src/components/LoadingSkeleton.tsx
new file mode 100644
index 0000000000..d49735dd15
--- /dev/null
+++ b/src/components/LoadingSkeleton.tsx
@@ -0,0 +1,18 @@
+import Skeleton, { type SkeletonProps } from '@mui/material/Skeleton/Skeleton';
+import React, { FC } from 'react';
+
+interface LoadingSkeletonProps extends SkeletonProps {
+    isLoading: boolean
+}
+
+export const LoadingSkeleton: FC<LoadingSkeletonProps> = ({
+    children,
+    isLoading,
+    ...props
+}) => (
+    isLoading ? (
+        <Skeleton {...props} />
+    ) : (
+        children
+    )
+);