From 07d921d26dda26a87656b0a589c8c45d6bac7b32 Mon Sep 17 00:00:00 2001
From: Ricky Smith <jamesricky@me.com>
Date: Wed, 9 Aug 2023 14:55:31 +0200
Subject: [PATCH] Add a generic Loading component for use in Admin

`Loading` handles the positioning of the loading indicator
automatically, depending on the set `behaviour` prop.
---
 .changeset/odd-dolphins-beam.md             |  7 +++
 packages/admin/admin/src/common/Loading.tsx | 60 +++++++++++++++++++++
 packages/admin/admin/src/index.ts           |  1 +
 3 files changed, 68 insertions(+)
 create mode 100644 .changeset/odd-dolphins-beam.md
 create mode 100644 packages/admin/admin/src/common/Loading.tsx

diff --git a/.changeset/odd-dolphins-beam.md b/.changeset/odd-dolphins-beam.md
new file mode 100644
index 0000000000..b70c4e7d8f
--- /dev/null
+++ b/.changeset/odd-dolphins-beam.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin": minor
+---
+
+Add a generic Loading component for use in Admin
+
+`Loading` handles the positioning of the loading indicator automatically, depending on the set `behaviour` prop.
diff --git a/packages/admin/admin/src/common/Loading.tsx b/packages/admin/admin/src/common/Loading.tsx
new file mode 100644
index 0000000000..b2b6cbc2d6
--- /dev/null
+++ b/packages/admin/admin/src/common/Loading.tsx
@@ -0,0 +1,60 @@
+import { CircularProgress, CircularProgressProps } from "@mui/material";
+import { css, styled } from "@mui/material/styles";
+import React from "react";
+
+export interface LoadingProps extends CircularProgressProps {
+    behavior?: "auto" | "fillParent" | "fillParentAbsolute" | "fillPageHeight";
+}
+
+export const Loading = ({ behavior = "auto", ...circularProgressProps }: LoadingProps) => {
+    const rootRef = React.useRef<HTMLDivElement>(null);
+    const offsetTop = rootRef.current?.offsetTop || 0;
+
+    return (
+        <Root ref={rootRef} style={{ "--comet-admin-loading-offset-top": `${offsetTop}px` } as React.CSSProperties} behavior={behavior}>
+            <LoadingContainer behavior={behavior}>
+                <CircularProgress {...circularProgressProps} />
+            </LoadingContainer>
+        </Root>
+    );
+};
+
+const Root = styled("div")<Required<Pick<LoadingProps, "behavior">>>`
+    position: relative;
+
+    ${({ behavior }) => {
+        if (behavior === "fillParent") {
+            return css`
+                height: 100%;
+                flex-grow: 1;
+            `;
+        }
+
+        if (behavior === "fillParentAbsolute") {
+            return css`
+                position: absolute;
+                inset: 0;
+            `;
+        }
+
+        if (behavior === "fillPageHeight") {
+            return css`
+                height: calc(100vh - var(--comet-admin-loading-offset-top));
+            `;
+        }
+    }}
+`;
+
+const LoadingContainer = styled("div")<Required<Pick<LoadingProps, "behavior">>>`
+    text-align: center;
+
+    ${({ behavior }) =>
+        behavior !== "auto" &&
+        css`
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        `}
+`;
diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts
index a4b09f2015..227a54e2e8 100644
--- a/packages/admin/admin/src/index.ts
+++ b/packages/admin/admin/src/index.ts
@@ -27,6 +27,7 @@ export { useSplitButtonContext } from "./common/buttons/split/useSplitButtonCont
 export { ClearInputAdornment, ClearInputAdornmentProps } from "./common/ClearInputAdornment";
 export { CometLogo } from "./common/CometLogo";
 export { HoverActions, HoverActionsClassKey, HoverActionsProps } from "./common/HoverActions";
+export { Loading, LoadingProps } from "./common/Loading";
 export { ToolbarActions, ToolbarActionsClassKey } from "./common/toolbar/actions/ToolbarActions";
 export {
     ToolbarAutomaticTitleItem,