use suspense

apps/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -106,8 +106,8 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
   const { t } = useTranslation();
   const router = useRouter();
 
-  const { data: ancestorsChildrenResult, error: error1 } = useSWRxPageAncestorsChildren(targetPath);
-  const { data: rootPageResult, error: error2 } = useSWRxRootPage();
+  const { data: ancestorsChildrenResult, error: error1 } = useSWRxPageAncestorsChildren(targetPath, { suspense: true });
+  const { data: rootPageResult, error: error2 } = useSWRxRootPage({ suspense: true });
   const { data: currentPagePath } = useCurrentPagePath();
   const { open: openDuplicateModal } = usePageDuplicateModal();
   const { open: openDeleteModal } = usePageDeleteModal();

apps/app/src/stores/page-listing.tsx

@@ -161,6 +161,7 @@ export const mutatePageTree = async(): Promise<undefined[]> => {
 
 export const useSWRxPageAncestorsChildren = (
     path: string | null,
+    config?: SWRConfiguration,
 ): SWRResponse<AncestorsChildrenResult, Error> => {
   const key = path ? [MUTATION_ID_FOR_PAGETREE, '/page-listing/ancestors-children', path] : null;
 
@@ -179,6 +180,7 @@ export const useSWRxPageAncestorsChildren = (
       };
     }),
     {
+      ...config,
       keepPreviousData: true,
     },
   );