From 17c4d3e5fb6056e92217d82355b8beebeda38301 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 10 Nov 2025 20:27:13 -0800
Subject: [PATCH] add LoadingOverlay component

---
 .../loading-overlay/loading-overlay.tsx       | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/shared/components/loading-overlay/loading-overlay.tsx

diff --git a/src/shared/components/loading-overlay/loading-overlay.tsx b/src/shared/components/loading-overlay/loading-overlay.tsx
new file mode 100644
index 000000000..fbefbf489
--- /dev/null
+++ b/src/shared/components/loading-overlay/loading-overlay.tsx
@@ -0,0 +1,28 @@
+import {
+    LoadingOverlay as MantineLoadingOverlay,
+    LoadingOverlayProps as MantineLoadingOverlayProps,
+} from '@mantine/core';
+
+import { Spinner } from '/@/shared/components/spinner/spinner';
+
+interface LoadingOverlayProps extends MantineLoadingOverlayProps {
+    color?: string;
+    opacity?: number;
+}
+
+export const LoadingOverlay = ({ ...props }: LoadingOverlayProps) => {
+    return (
+        <MantineLoadingOverlay
+            loaderProps={{ children: <Spinner /> }}
+            overlayProps={{
+                color: 'var(--theme-colors-background)',
+                opacity: 0.5,
+            }}
+            transitionProps={{
+                duration: 0.5,
+                transition: 'fade',
+            }}
+            {...props}
+        />
+    );
+};