fix pagetree

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

@@ -1,92 +1,126 @@
-import React, { FC, memo } from 'react';
+// import React, { FC, memo } from 'react';
+
+// import { useTranslation } from 'next-i18next';
+
+// import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
+// import { useCurrentPagePath, useCurrentPageId } from '~/stores/page';
+// import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
+
+// import { PageTreeItem } from '../Sidebar/PageTreeItem/PageTreeItem';
+
+// import { ItemsTree } from './ItemsTree';
+// import PageTreeContentSkeleton from './PageTreeContentSkeleton';
+// import { PrivateLegacyPagesLink } from './PrivateLegacyPagesLink';
+
+// const PageTreeHeader = () => {
+//   const { t } = useTranslation();
+
+//   return (
+//     <div className="grw-sidebar-content-header py-3 d-flex">
+//       <h3 className="mb-0">{t('Page Tree')}</h3>
+//     </div>
+//   );
+// };
+
+// export const PageTree: FC = memo(() => {
+//   const { t } = useTranslation();
+
+//   const { data: isGuestUser } = useIsGuestUser();
+//   const { data: isReadOnlyUser } = useIsReadOnlyUser();
+//   const { data: currentPath } = useCurrentPagePath();
+//   const { data: targetId } = useCurrentPageId();
+//   const { data: targetAndAncestorsData } = useTargetAndAncestors();
+//   const { data: migrationStatus } = useSWRxV5MigrationStatus();
+
+//   const targetPathOrId = targetId || currentPath;
+
+//   if (migrationStatus == null) {
+//     return (
+//       <div className="px-3">
+//         <PageTreeHeader />
+//         <PageTreeContentSkeleton />
+//       </div>
+//     );
+//   }
+
+//   if (!migrationStatus?.isV5Compatible) {
+//     // TODO : improve design
+//     // Story : https://redmine.weseek.co.jp/issues/83755
+//     return (
+//       <div className="px-3">
+//         <PageTreeHeader />
+//         <div className="mt-5 mx-2 text-center">
+//           <h3 className="text-gray">{t('v5_page_migration.page_tree_not_avaliable')}</h3>
+//           <a href="/admin">{t('v5_page_migration.go_to_settings')}</a>
+//         </div>
+//       </div>
+//     );
+//   }
+
+//   /*
+//    * dependencies
+//    */
+//   if (isGuestUser == null) {
+//     return null;
+//   }
+
+//   const path = currentPath || '/';
+
+//   return (
+//     <div className="px-3">
+//       <PageTreeHeader />
+//       <ItemsTree
+//         isEnableActions={!isGuestUser}
+//         isReadOnlyUser={!!isReadOnlyUser}
+//         targetPath={path}
+//         targetPathOrId={targetPathOrId}
+//         targetAndAncestorsData={targetAndAncestorsData}
+//         CustomTreeItem={PageTreeItem}
+//       />
+
+//       {!isGuestUser && !isReadOnlyUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (
+//         <div className="grw-pagetree-footer border-top py-3 w-100">
+//           <div className="private-legacy-pages-link px-3 py-2">
+//             <PrivateLegacyPagesLink />
+//           </div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// });
+
+// PageTree.displayName = 'PageTree';
+
+
+import { Suspense } from 'react';
+
+import dynamic from 'next/dynamic';
+import { useTranslation } from 'react-i18next';
 
-import { useTranslation } from 'next-i18next';
-
-import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores/context';
-import { useCurrentPagePath, useCurrentPageId } from '~/stores/page';
-import { useSWRxV5MigrationStatus } from '~/stores/page-listing';
-
-import { PageTreeItem } from '../Sidebar/PageTreeItem/PageTreeItem';
-
-import { ItemsTree } from './ItemsTree';
 import PageTreeContentSkeleton from './PageTreeContentSkeleton';
-import { PrivateLegacyPagesLink } from './PrivateLegacyPagesLink';
+import { PageTreeHeader } from './PageTreeSubstance';
 
-const PageTreeHeader = () => {
-  const { t } = useTranslation();
+const PageTreeContent = dynamic(
+  () => import('./PageTreeSubstance').then(mod => mod.PageTreeContent),
+  { ssr: false, loading: PageTreeContentSkeleton },
+);
 
-  return (
-    <div className="grw-sidebar-content-header py-3 d-flex">
-      <h3 className="mb-0">{t('Page Tree')}</h3>
-    </div>
-  );
-};
 
-export const PageTree: FC = memo(() => {
+export const PageTree = (): JSX.Element => {
   const { t } = useTranslation();
 
-  const { data: isGuestUser } = useIsGuestUser();
-  const { data: isReadOnlyUser } = useIsReadOnlyUser();
-  const { data: currentPath } = useCurrentPagePath();
-  const { data: targetId } = useCurrentPageId();
-  const { data: targetAndAncestorsData } = useTargetAndAncestors();
-  const { data: migrationStatus } = useSWRxV5MigrationStatus();
-
-  const targetPathOrId = targetId || currentPath;
-
-  if (migrationStatus == null) {
-    return (
-      <div className="px-3">
-        <PageTreeHeader />
-        <PageTreeContentSkeleton />
-      </div>
-    );
-  }
-
-  if (!migrationStatus?.isV5Compatible) {
-    // TODO : improve design
-    // Story : https://redmine.weseek.co.jp/issues/83755
-    return (
-      <div className="px-3">
-        <PageTreeHeader />
-        <div className="mt-5 mx-2 text-center">
-          <h3 className="text-gray">{t('v5_page_migration.page_tree_not_avaliable')}</h3>
-          <a href="/admin">{t('v5_page_migration.go_to_settings')}</a>
-        </div>
-      </div>
-    );
-  }
-
-  /*
-   * dependencies
-   */
-  if (isGuestUser == null) {
-    return null;
-  }
-
-  const path = currentPath || '/';
-
   return (
     <div className="px-3">
-      <PageTreeHeader />
-      <ItemsTree
-        isEnableActions={!isGuestUser}
-        isReadOnlyUser={!!isReadOnlyUser}
-        targetPath={path}
-        targetPathOrId={targetPathOrId}
-        targetAndAncestorsData={targetAndAncestorsData}
-        CustomTreeItem={PageTreeItem}
-      />
-
-      {!isGuestUser && !isReadOnlyUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (
-        <div className="grw-pagetree-footer border-top py-3 w-100">
-          <div className="private-legacy-pages-link px-3 py-2">
-            <PrivateLegacyPagesLink />
-          </div>
-        </div>
-      )}
+      <div className="grw-sidebar-content-header py-3 d-flex">
+        <h3 className="mb-0">{t('Page Tree')}</h3>
+        <Suspense>
+          <PageTreeHeader />
+        </Suspense>
+      </div>
+
+      <Suspense fallback={<PageTreeContentSkeleton />}>
+        <PageTreeContent />
+      </Suspense>
     </div>
   );
-});
-
-PageTree.displayName = 'PageTree';
+};

apps/app/src/components/ItemsTree/PageTreeSubstance.tsx

@@ -44,7 +44,7 @@ const PageTreeUnavailable = () => {
   );
 };
 
-export const PageTree = memo(() => {
+export const PageTreeContent = memo(() => {
   const { t } = useTranslation();
 
   const { data: isGuestUser } = useIsGuestUser();
@@ -92,4 +92,4 @@ export const PageTree = memo(() => {
   );
 });
 
-PageTree.displayName = 'PageTree';
+PageTreeContent.displayName = 'PageTreeContent';

apps/app/src/components/TreeItem/NewPageCreateButton.tsx

@@ -54,7 +54,7 @@ export const NewPageCreateButton: FC<NewPageCreateButtonProps> = (props) => {
         <NotAvailableForGuest>
           <NotAvailableForReadOnlyUser>
             <button
-              id='page-create-button-in-page-tree'
+              id="page-create-button-in-page-tree"
               type="button"
               className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
               onClick={onClickPlusButton}