fix: custom placeholder

src/components/File.tsx

@@ -43,14 +43,12 @@ export function FileMeta({ Icon, title, subtitle, ...other }) {
   );
 }
 
-export default function File({ image, updateImages, disableMediaPreview, exifEnabled }) {
+export default function File({ image, disableMediaPreview, exifEnabled }) {
   const [open, setOpen] = useState(false);
   const deleteFile = useFileDelete();
   const favoriteFile = useFileFavorite();
   const clipboard = useClipboard();
 
-  console.log(exifEnabled);
-
   const loading = deleteFile.isLoading || favoriteFile.isLoading;
 
   const handleDelete = async () => {

src/components/Type.tsx

@@ -1,23 +1,26 @@
-import { Group, Image, Text } from '@mantine/core';
+import { Box, Center, Group, Image, Text } from '@mantine/core';
 import { Prism } from '@mantine/prism';
 import { useEffect, useState } from 'react';
-import { AudioIcon, FileIcon, PlayIcon } from './icons';
+import { AudioIcon, FileIcon, ImageIcon, PlayIcon } from './icons';
+
+function PlaceholderContent({ text, Icon }) {
+  return (
+    <Group sx={(t) => ({ color: t.colors.dark[2] })}>
+      <Icon size={48} />
+      <Text size='md'>{text}</Text>
+    </Group>
+  );
+}
 
 function Placeholder({ text, Icon, ...props }) {
   if (props.disableResolve) props.src = null;
 
   return (
-    <Image
-      height={200}
-      withPlaceholder
-      placeholder={
-        <Group>
-          <Icon size={48} />
-          <Text size='md'>{text}</Text>
-        </Group>
-      }
-      {...props}
-    />
+    <Box sx={{ height: 200 }} {...props}>
+      <Center sx={{ height: 200 }}>
+        <PlaceholderContent text={text} Icon={Icon} />
+      </Center>
+    </Box>
   );
 }
 
@@ -50,7 +53,12 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
     media ? (
       {
         video: <video width='100%' autoPlay controls {...props} />,
-        image: <Image {...props} />,
+        image: (
+          <Image
+            placeholder={<PlaceholderContent Icon={FileIcon} text={'Image failed to load...'} />}
+            {...props}
+          />
+        ),
         audio: <audio autoPlay controls {...props} style={{ width: '100%' }} />,
         text: (
           <Prism withLineNumbers language={name.split('.').pop()} {...props} style={{}} sx={{}}>
@@ -64,7 +72,12 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
   ) : media ? (
     {
       video: <Placeholder Icon={PlayIcon} text={`Click to view video (${name})`} {...props} />,
-      image: <Image {...props} />,
+      image: (
+        <Image
+          placeholder={<PlaceholderContent Icon={ImageIcon} text={'Image failed to load...'} />}
+          {...props}
+        />
+      ),
       audio: <Placeholder Icon={AudioIcon} text={`Click to view audio (${name})`} {...props} />,
       text: <Placeholder Icon={FileIcon} text={`Click to view text file (${name})`} {...props} />,
     }[type]

src/components/pages/Dashboard/RecentFiles.tsx

@@ -2,7 +2,7 @@ import { Card as MantineCard, Center, Group, SimpleGrid, Skeleton, Title } from
 import { randomId } from '@mantine/hooks';
 import File from 'components/File';
 import MutedText from 'components/MutedText';
-import { invalidateFiles, useRecent } from 'lib/queries/files';
+import { useRecent } from 'lib/queries/files';
 import { UploadCloud } from 'react-feather';
 
 export default function RecentFiles({ disableMediaPreview, exifEnabled }) {
@@ -22,7 +22,6 @@ export default function RecentFiles({ disableMediaPreview, exifEnabled }) {
               <File
                 key={randomId()}
                 image={image}
-                updateImages={invalidateFiles}
                 disableMediaPreview={disableMediaPreview}
                 exifEnabled={exifEnabled}
               />

src/components/pages/Files/FilePagation.tsx

@@ -44,7 +44,6 @@ export default function FilePagation({ disableMediaPreview, exifEnabled }) {
                 <div key={image.id}>
                   <File
                     image={image}
-                    updateImages={() => pages.refetch()}
                     disableMediaPreview={disableMediaPreview}
                     exifEnabled={exifEnabled}
                   />

src/components/pages/Files/index.tsx

@@ -47,7 +47,6 @@ export default function Files({ disableMediaPreview, exifEnabled }) {
                       <div key={image.id}>
                         <File
                           image={image}
-                          updateImages={() => updatePages(true)}
                           disableMediaPreview={disableMediaPreview}
                           exifEnabled={exifEnabled}
                         />