fix: solve PublicationThumbnail issue to refresh image

src/components/common/ContentLoader.tsx

@@ -1,17 +1,23 @@
 import { Skeleton } from '@mui/material';
 
+const DEFAULT_WIDTH = '100%';
+
 type Props = {
   children: JSX.Element | JSX.Element[];
   isLoading: boolean;
+  width?: string | number;
+  height?: string | number;
 };
 
 export const ContentLoader = ({
   children,
   isLoading,
+  width = DEFAULT_WIDTH,
+  height,
 }: Props): JSX.Element | JSX.Element[] => {
   if (isLoading) {
     return (
-      <Skeleton variant="rounded" width="100%">
+      <Skeleton variant="rounded" width={width} height={height}>
         {children}
       </Skeleton>
     );

src/components/common/ThumbnailUploader.tsx

@@ -65,6 +65,7 @@ const ThumbnailUploader = ({
   thumbnailSize = THUMBNAIL_DIMENSION,
   currentThumbnail,
 }: Props): JSX.Element => {
+  // TODO: merge with ThumbnailSetting ?
   const inputRef = useRef<HTMLInputElement>(null);
   const [showCropModal, setShowCropModal] = useState(false);
   const [newAvatar, setNewAvatar] = useState<string>(currentThumbnail ?? '');

src/components/item/publish/PublicationThumbnail.tsx

@@ -9,13 +9,17 @@ import { theme } from '@graasp/ui';
 import Uppy from '@uppy/core';
 import { title } from 'process';
 
+import ContentLoader from '@/components/common/ContentLoader';
+import StatusBar from '@/components/file/StatusBar';
 import { WARNING_COLOR } from '@/config/constants';
 import { hooks, mutations } from '@/config/queryClient';
 import { buildPublishWarningIcon } from '@/config/selectors';
 import { configureThumbnailUppy } from '@/utils/uppy';
 
 import ThumbnailUploader from '../../common/ThumbnailUploader';
 
+const THUMBNAIL_SIZE = 150;
+
 type ItemThumbnail = {
   hasThumbnail?: boolean;
   url?: string;
@@ -25,26 +29,45 @@ type Props = {
   item: DiscriminatedItem;
 };
 export const PublicationThumbnail = ({ item }: Props): JSX.Element => {
+  // TODO: extract logic in hook and reuse in ThumbnailSetting and ThumbnailUploader ?
   const { mutate: deleteThumbnail } = mutations.useDeleteItemThumbnail();
   const { mutate: onFileUploadComplete } = mutations.useUploadFiles();
 
-  const itemId = item.id;
-  const { data: thumbnailUrl } = hooks.useItemThumbnailUrl({
-    id: itemId,
-    size: ThumbnailSize.Medium,
-  });
+  const { id: itemId, settings } = item;
+  const { data: thumbnailUrl, isLoading: isThumbnailLoading } =
+    hooks.useItemThumbnailUrl({
+      id: itemId,
+      size: ThumbnailSize.Medium,
+    });
 
   const [uppy, setUppy] = useState<Uppy>();
+  const [openStatusBar, setOpenStatusBar] = useState(false);
+  // TODO: check if this state is needed
   const [itemThumbnail, setItemThumbnail] = useState<ItemThumbnail>({
     url: thumbnailUrl,
-    hasThumbnail: item.settings.hasThumbnail,
+    hasThumbnail: settings.hasThumbnail,
   });
 
+  // TODO: check if it is possible to avoid useEffect
+  // Used to synchronize when thumbnailUrl change
+  useEffect(() => {
+    setItemThumbnail({
+      url: thumbnailUrl,
+      hasThumbnail: settings.hasThumbnail,
+    });
+  }, [settings, thumbnailUrl]);
+
+  const handleClose = () => {
+    setOpenStatusBar(false);
+  };
+
   useEffect(() => {
     setUppy(
       configureThumbnailUppy({
         itemId,
-        onUpload: () => {},
+        onUpload: () => {
+          setOpenStatusBar(true);
+        },
         onError: (error: Error) => {
           onFileUploadComplete({ id: itemId, error });
         },
@@ -56,6 +79,9 @@ export const PublicationThumbnail = ({ item }: Props): JSX.Element => {
             onFileUploadComplete({ id: itemId, data });
             setItemThumbnail({ hasThumbnail: true });
           }
+          // close progress bar of uppy
+          handleClose();
+          return false;
         },
       }),
     );
@@ -86,36 +112,43 @@ export const PublicationThumbnail = ({ item }: Props): JSX.Element => {
   };
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-      }}
-    >
-      <ThumbnailUploader
-        currentThumbnail={itemThumbnail.url}
-        thumbnailSize={150}
-        onDelete={onDelete}
-        setChanges={onThumbnailUpload}
-      />
-      <Box
-        sx={{
-          position: 'absolute',
-          top: 15,
-          right: 15,
-          zIndex: theme.zIndex.drawer - 1,
-        }}
-      >
-        {/* TODO: handle slow 3G */}
-        {!itemThumbnail.hasThumbnail && (
-          <Tooltip title="Add a thumbnail to improve your">
-            <WarningIcon
-              htmlColor={WARNING_COLOR}
-              data-cy={buildPublishWarningIcon(title)}
-            />
-          </Tooltip>
-        )}
-      </Box>
-    </Box>
+    <>
+      <ContentLoader isLoading={isThumbnailLoading} width={THUMBNAIL_SIZE}>
+        <Box
+          sx={{
+            position: 'relative',
+          }}
+        >
+          <ThumbnailUploader
+            currentThumbnail={itemThumbnail.url}
+            thumbnailSize={THUMBNAIL_SIZE}
+            onDelete={onDelete}
+            setChanges={onThumbnailUpload}
+          />
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 15,
+              right: 15,
+              zIndex: theme.zIndex.drawer - 1,
+            }}
+          >
+            {/* TODO: handle slow 3G */}
+            {!itemThumbnail.hasThumbnail && (
+              <Tooltip title="Add a thumbnail to improve your">
+                <WarningIcon
+                  htmlColor={WARNING_COLOR}
+                  data-cy={buildPublishWarningIcon(title)}
+                />
+              </Tooltip>
+            )}
+          </Box>
+        </Box>
+      </ContentLoader>
+      {uppy && (
+        <StatusBar uppy={uppy} handleClose={handleClose} open={openStatusBar} />
+      )}
+    </>
   );
 };