Refactor TaskQueuePage to use lazy loading and suspense

2024-10-13 02:08:12 +09:00 · 2024-10-13 02:08:12 +09:00 · 1e3701e37c
commit 1e3701e37c
parent f543ad1cf4
1 changed files with 8 additions and 4 deletions
--- a/packages/client/src/page/taskQueuePage.tsx
+++ b/packages/client/src/page/taskQueuePage.tsx
@ -1,9 +1,13 @@
-import DynamicWorkQueue from "@/components/gallery/WorkQueue";
+import { lazy, Suspense } from 'react';

-export default function TaskQueuePage(){
+const DynamicWorkQueue = lazy(() => import('@/components/gallery/WorkQueue'));
+
+export default function TaskQueuePage() {
    return (
        <div>
-            <DynamicWorkQueue />
+            <Suspense fallback={<div>Loading...</div>}>
+                <DynamicWorkQueue />
+            </Suspense>
        </div>
-    )   
+    );
 }