plan loading message dialog

src-react/src/components/LoadingDialog.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+import { Dialog, Portal } from "@chakra-ui/react";
+
+function LoadingDialog() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setIsLoading(true);
+  }, []);
+
+  return (
+    <Dialog.Root open={isLoading}>
+      <Dialog.Trigger />
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.CloseTrigger />
+            <Dialog.Header>
+              <Dialog.Title />
+            </Dialog.Header>
+            <Dialog.Body>Example text</Dialog.Body>
+            <Dialog.Footer />
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}
+
+export default LoadingDialog;