From 1e8ae47f2e85bf40cc17606302656b3fe876792b Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 12 Oct 2024 16:59:18 +0530
Subject: [PATCH] Add caption

---
 .../base/components/mui/ActivityIndicator.tsx | 24 +++++++++++++++----
 .../components/gallery/PeopleHeader.tsx       |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/packages/base/components/mui/ActivityIndicator.tsx b/web/packages/base/components/mui/ActivityIndicator.tsx
index 7482ca704a..e7633d71f9 100644
--- a/web/packages/base/components/mui/ActivityIndicator.tsx
+++ b/web/packages/base/components/mui/ActivityIndicator.tsx
@@ -1,13 +1,29 @@
-import { CircularProgress, type CircularProgressProps } from "@mui/material";
+import {
+    CircularProgress,
+    Stack,
+    Typography,
+    type CircularProgressProps,
+} from "@mui/material";
 import type React from "react";
 
 /**
  * A standard {@link CircularProgress} for use in our code.
  *
+ * If a child is specified, it is wrapped in a Typography and shown as a caption
+ * below the {@link CircularProgress}.
+ *
  * While it does take and forward props to the the underlying
  * {@link CircularProgress}, if you find yourself needing to customize it too
  * much, consider directly using a {@link CircularProgress} instead.
  */
-export const ActivityIndicator: React.FC<CircularProgressProps> = (props) => (
-    <CircularProgress color="accent" size={32} {...props} />
-);
+export const ActivityIndicator: React.FC<
+    React.PropsWithChildren<CircularProgressProps>
+> = ({ children, ...rest }) =>
+    children ? (
+        <Stack sx={{ gap: 2, alignItems: "center" }}>
+            <CircularProgress color="accent" size={24} {...rest} />
+            <Typography color="text.muted">{children}</Typography>
+        </Stack>
+    ) : (
+        <CircularProgress color="accent" size={32} {...rest} />
+    );
diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index 2ac1356998..1dac885263 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -327,7 +327,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
                 {!suggestions ? (
                     <CenteredBox>
                         {phase == "loading" || true ? (
-                            <ActivityIndicator />
+                            <ActivityIndicator>{pt("Finding similar faces...")}</ActivityIndicator>
                         ) : (
                             <Typography
                                 color="text.muted"