mirror of
https://github.com/ente-io/ente.git
synced 2025-06-10 18:59:23 +00:00
61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
import { Overlay, Stack100vhCenter } from "@/base/components/containers";
|
|
import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
|
|
import { Backdrop } from "@mui/material";
|
|
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={{
|
|
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.
|
|
*/
|
|
export const TranslucentLoadingOverlay: React.FC = () => (
|
|
<Backdrop
|
|
// Specifying open here causes us to lose animations. This is fine since
|
|
// the use of this is limited to a few interstitial overlays, and if
|
|
// refactoring consider replacing this entirely with a more localized
|
|
// activity indicator.
|
|
open={true}
|
|
sx={{
|
|
backdropFilter: "blur(30px) opacity(95%)",
|
|
// TODO: Why is this zIndex override required? + use a constant.
|
|
zIndex: 9000,
|
|
}}
|
|
>
|
|
<ActivityIndicator />
|
|
</Backdrop>
|
|
);
|