feat: init

apps/web/src/components/common/LoadRemixAsyncComponent.tsx

@@ -0,0 +1,53 @@
+import type { FC, ReactNode } from 'react'
+import { createElement, useEffect, useState } from 'react'
+
+import { LoadingCircle } from '../ui/loading'
+
+export const LoadRemixAsyncComponent: FC<{
+  loader: () => Promise<any>
+  Header: FC<{ loader: () => any; [key: string]: any }>
+}> = ({ loader, Header }) => {
+  const [loading, setLoading] = useState(true)
+
+  const [Component, setComponent] = useState<{ c: () => ReactNode }>({
+    c: () => null,
+  })
+
+  useEffect(() => {
+    let isUnmounted = false
+    setLoading(true)
+    loader()
+      .then((module) => {
+        if (!module.Component) {
+          return
+        }
+        if (isUnmounted) return
+
+        const { loader } = module
+        setComponent({
+          c: () => (
+            <>
+              <Header loader={loader} />
+              <module.Component />
+            </>
+          ),
+        })
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+    return () => {
+      isUnmounted = true
+    }
+  }, [Header, loader])
+
+  if (loading) {
+    return (
+      <div className="center absolute inset-0 h-full">
+        <LoadingCircle size="large" />
+      </div>
+    )
+  }
+
+  return createElement(Component.c)
+}