mirror of
https://github.com/ente-io/ente.git
synced 2025-06-11 03:03:16 +00:00
36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { Overlay, Stack100vhCenter } from "@/base/components/containers";
|
|
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
|
|
import React from "react";
|
|
|
|
/**
|
|
* A centered activity indicator shown in a container that fills up the entire
|
|
* width and height of the viewport.
|
|
*
|
|
* This is meant as a root component of a page, e.g., during initial load.
|
|
*/
|
|
export const LoadingIndicator: React.FC = () => (
|
|
<Stack100vhCenter>
|
|
<ActivityIndicator />
|
|
</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={(theme) => ({
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
zIndex: 2000,
|
|
backgroundColor: theme.colors.background.base,
|
|
})}
|
|
>
|
|
<ActivityIndicator />
|
|
</Overlay>
|
|
);
|