Fix image loading skeleton

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 =

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>
 );
 

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
+    )
+);