Reuse

web/apps/accounts/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
-import { LoadingOverlay } from "@/base/components/loaders";
+import { LoadingIndicator } from "@/base/components/loaders";
 import { AttributedMiniDialog } from "@/base/components/MiniDialog";
 import { useAttributedMiniDialog } from "@/base/components/utils/dialog";
 import { useSetupI18n, useSetupLogs } from "@/base/components/utils/hooks-app";
@@ -32,7 +32,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                 <AttributedMiniDialog {...miniDialogProps} />
 
                 <AppContext.Provider value={appContext}>
-                    {!isI18nReady && <LoadingOverlay />}
+                    {!isI18nReady && <LoadingIndicator />}
                     {isI18nReady && <Component {...pageProps} />}
                 </AppContext.Provider>
             </ThemeProvider>

web/apps/auth/src/pages/_app.tsx

@@ -2,7 +2,7 @@ import { accountLogout } from "@/accounts/services/logout";
 import { clientPackageName, staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
 import {
-    LoadingOverlay,
+    LoadingIndicator,
     TranslucentLoadingOverlay,
 } from "@/base/components/loaders";
 import { AttributedMiniDialog } from "@/base/components/MiniDialog";
@@ -68,7 +68,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
 
                 <AppContext.Provider value={appContext}>
                     {!isI18nReady ? (
-                        <LoadingOverlay />
+                        <LoadingIndicator />
                     ) : (
                         <>
                             {isChangingRoute && <TranslucentLoadingOverlay />}

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

@@ -7,7 +7,7 @@ import {
 import { CenteredFlex } from "@/base/components/containers";
 import { CustomHead } from "@/base/components/Head";
 import {
-    LoadingOverlay,
+    LoadingIndicator,
     TranslucentLoadingOverlay,
 } from "@/base/components/loaders";
 import { AttributedMiniDialog } from "@/base/components/MiniDialog";
@@ -197,7 +197,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                 )}
                 <AppContext.Provider value={appContext}>
                     {!isI18nReady ? (
-                        <LoadingOverlay />
+                        <LoadingIndicator />
                     ) : (
                         <>
                             {isChangingRoute && <TranslucentLoadingOverlay />}

web/packages/base/components/loaders.tsx

@@ -1,4 +1,4 @@
-import { Overlay, Stack100vhCenter } from "@/base/components/containers";
+import { Stack100vhCenter } from "@/base/components/containers";
 import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { Backdrop } from "@mui/material";
 import React from "react";
@@ -15,32 +15,12 @@ export const LoadingIndicator: React.FC = () => (
     </Stack100vhCenter>
 );
 
-/**
- * An opaque overlay that covers the entire viewport and shows an activity
- * indicator in its center.
- *
- * Useful as a top level "blocking" overscreen while the app is being loaded.
- */
-export const LoadingOverlay: React.FC = () => (
-    <Overlay
-        sx={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            zIndex: 2000,
-            backgroundColor: "background.default",
-        }}
-    >
-        <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. The use of this component is
- * not recommended for new code.
+ * Used as a overlay during blocking actions. The use of this component is not
+ * recommended for new code.
  */
 export const TranslucentLoadingOverlay: React.FC = () => (
     <Backdrop
@@ -52,8 +32,10 @@ export const TranslucentLoadingOverlay: React.FC = () => (
         sx={{
             backgroundColor: "var(--mui-palette-backdrop-muted)",
             backdropFilter: "blur(30px) opacity(95%)",
-            // TODO: Why is this zIndex override required? + use a constant.
-            zIndex: 9000,
+            // This is `aboveFileViewerContentZ + delta`. Cannot use a constant
+            // here since this is used outside photos too. Eventually just get
+            // rid of this component, merging it to specific uses.
+            zIndex: 2000,
         }}
     >
         <ActivityIndicator />