fix: wrap DirectoryList with React.Suspense (#10727)

apps/v4/components/directory-list.tsx

@@ -160,6 +160,18 @@ function DirectoryPaginationNext({
 }
 
 export function DirectoryList() {
+  return (
+    <DirectoryAddProvider>
+      <div className="mt-6">
+        <React.Suspense fallback={<DirectoryListSkeleton />}>
+          <DirectoryListContent />
+        </React.Suspense>
+      </div>
+    </DirectoryAddProvider>
+  )
+}
+
+function DirectoryListContent() {
   const pathname = usePathname()
   const {
     isLoading,
@@ -204,12 +216,11 @@ export function DirectoryList() {
     [page, setPage]
   )
 
+  if (isLoading) {
+    return <DirectoryListSkeleton />
+  }
+
   return (
-    <DirectoryAddProvider>
-      <div className="mt-6">
-        {isLoading ? (
-          <DirectoryListSkeleton />
-        ) : (
     <>
       <SearchDirectory
         query={query}
@@ -314,9 +325,6 @@ export function DirectoryList() {
         </Pagination>
       )}
     </>
-        )}
-      </div>
-    </DirectoryAddProvider>
   )
 }