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 = (props) => ( - -); +export const ActivityIndicator: React.FC< + React.PropsWithChildren +> = ({ children, ...rest }) => + children ? ( + + + {children} + + ) : ( + + ); 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 = ({ {!suggestions ? ( {phase == "loading" || true ? ( - + {pt("Finding similar faces...")} ) : (