Merge branch 'main' into ffmpeg-static-integration

src/components/PhotoList.tsx

@@ -249,6 +249,8 @@ export function PhotoList({
         publicCollectionGalleryContext.accessedThroughSharedURL,
         galleryContext.photoListHeader,
         publicCollectionGalleryContext.photoListHeader,
+        deduplicateContext.isOnDeduplicatePage,
+        deduplicateContext.fileSizeMap,
     ]);
 
     const groupByFileSize = (timeStampList: TimeStampListItem[]) => {

src/components/PhotoViewer/InfoDialog/RenderCaption.tsx

@@ -70,7 +70,7 @@ export function RenderCaption({
                                 <FreeFlowText>{caption}</FreeFlowText>
                             ) : (
                                 <Typography color="text.secondary">
-                                    Add a caption
+                                    {constants.CAPTION_PLACEHOLDER}
                                 </Typography>
                             )}
                         </Value>

src/pages/deduplicate/index.tsx

@@ -24,6 +24,8 @@ import router from 'next/router';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
 import { styled } from '@mui/material';
 import { syncCollections } from 'services/collectionService';
+import EnteSpinner from 'components/EnteSpinner';
+import VerticallyCentered from 'components/Container';
 
 export const DeduplicateContext = createContext<DeduplicateContextType>(
     DefaultDeduplicateContext
@@ -143,8 +145,14 @@ export default function Deduplicate() {
         setSelected({ count: 0, collectionID: 0 });
     };
 
-    if (!duplicateFiles) {
-        return <></>;
+    if (!duplicateFiles?.length) {
+        return (
+            <VerticallyCentered>
+                <EnteSpinner>
+                    <span className="sr-only">Loading...</span>
+                </EnteSpinner>
+            </VerticallyCentered>
+        );
     }
 
     return (

src/themes/darkThemeOptions.tsx

@@ -87,6 +87,12 @@ declare module '@mui/material/Alert' {
     }
 }
 
+declare module '@mui/material/CircularProgress' {
+    export interface CircularProgressPropsColorOverrides {
+        accent: true;
+    }
+}
+
 // Create a theme instance.
 const darkThemeOptions = createTheme({
     components: {

src/utils/strings/englishConstants.tsx

@@ -435,7 +435,8 @@ const englishConstants = {
     INFO: 'Info',
     FILE_ID: 'File ID',
     FILE_NAME: 'File name',
-    CAPTION: 'Caption',
+    CAPTION: 'Description',
+    CAPTION_PLACEHOLDER: 'Add a description',
     CREATION_TIME: 'Creation time',
     UPDATED_ON: 'Updated on',
     LOCATION: 'Location',