Remove hardcoded

web/apps/photos/src/components/GalleryLoadingOverlay.tsx

@@ -1,16 +0,0 @@
-import { styled } from "@mui/material";
-export const GalleryLoadingOverlay = styled("div")`
-    left: 0;
-    top: 0;
-    outline: none;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    font-weight: 900;
-    position: absolute;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 9000;
-`;

web/apps/photos/src/pages/gallery.tsx

@@ -2,8 +2,8 @@ import { sessionExpiredDialogAttributes } from "@/accounts/components/utils/dial
 import { stashRedirect } from "@/accounts/services/redirect";
 import type { MiniDialogAttributes } from "@/base/components/MiniDialog";
 import { AppNavbar, NavbarBase } from "@/base/components/Navbar";
+import { TranslucentLoadingOverlay } from "@/base/components/loaders";
 import type { ButtonishProps } from "@/base/components/mui";
-import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { errorDialogAttributes } from "@/base/components/utils/dialog";
 import { useIsSmallWidth } from "@/base/components/utils/hooks";
@@ -99,7 +99,6 @@ import {
 } from "components/FilesDownloadProgress";
 import { FixCreationTime } from "components/FixCreationTime";
 import GalleryEmptyState from "components/GalleryEmptyState";
-import { GalleryLoadingOverlay } from "components/GalleryLoadingOverlay";
 import PhotoFrame from "components/PhotoFrame";
 import { ITEM_TYPE, TimeStampListItem } from "components/PhotoList";
 import Sidebar from "components/Sidebar";
@@ -902,11 +901,7 @@ const Page: React.FC = () => {
                     }}
                 />
                 <AppNavbar />
-                {blockingLoad && (
-                    <GalleryLoadingOverlay>
-                        <ActivityIndicator />
-                    </GalleryLoadingOverlay>
-                )}
+                {blockingLoad && <TranslucentLoadingOverlay />}
                 {isFirstLoad && (
                     <CenteredFlex>
                         <Typography

web/apps/photos/src/pages/shared-albums.tsx

@@ -7,9 +7,8 @@ import {
     Stack100vhCenter,
 } from "@/base/components/containers";
 import { EnteLogoSVG } from "@/base/components/EnteLogo";
-import { LoadingIndicator } from "@/base/components/loaders";
+import { LoadingIndicator, TranslucentLoadingOverlay } from "@/base/components/loaders";
 import type { ButtonishProps } from "@/base/components/mui";
-import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
 import {
@@ -59,7 +58,6 @@ import {
     FilesDownloadProgress,
     FilesDownloadProgressAttributes,
 } from "components/FilesDownloadProgress";
-import { GalleryLoadingOverlay } from "components/GalleryLoadingOverlay";
 import PhotoFrame from "components/PhotoFrame";
 import { ITEM_TYPE, TimeStampListItem } from "components/PhotoList";
 import Uploader from "components/Upload/Uploader";
@@ -532,11 +530,7 @@ export default function PublicCollectionGallery() {
                     }
                     selectable={downloadEnabled}
                 />
-                {blockingLoad && (
-                    <GalleryLoadingOverlay>
-                        <ActivityIndicator />
-                    </GalleryLoadingOverlay>
-                )}
+                {blockingLoad && <TranslucentLoadingOverlay />}
                 <Uploader
                     syncWithRemote={syncWithRemote}
                     uploadCollection={publicCollection}

web/packages/base/components/loaders.tsx

@@ -33,3 +33,23 @@ export const LoadingOverlay: React.FC = () => (
         <ActivityIndicator />
     </Overlay>
 );
+
+/**
+ * An translucent overlay that covers the entire viewport and shows an activity
+ * indicator in its center.
+ *
+ * Used as a overscreen during blocking actions.
+ */
+export const TranslucentLoadingOverlay: React.FC = () => (
+    <Overlay
+        sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 9000,
+            backgroundColor: "backdrop.muted",
+        }}
+    >
+        <ActivityIndicator />
+    </Overlay>
+);

web/packages/base/components/utils/theme.ts

@@ -189,8 +189,8 @@ const _colors = {
             paper2: "#252525",
         },
         backdrop: {
-            base: "rgba(0, 0, 0, 0.90)" /* unused */,
-            muted: "rgba(0, 0, 0, 0.65)" /* unused */,
+            base: "rgba(0, 0, 0, 0.90)",
+            muted: "rgba(0, 0, 0, 0.65)",
             faint: "rgba(0, 0, 0,0.20)",
         },
         text: {