[WEB-5458] improvement: restructure layout components to enhance loading (#4805)

apps/web/app/(all)/[workspaceSlug]/(pi)/pi-chat/layout.tsx

@@ -2,15 +2,12 @@
 
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
-import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 import { WithFeatureFlagHOC } from "@/plane-web/components/feature-flags";
 // components
 import { EmptyPiChat } from "@/plane-web/components/pi-chat/empty";
 import { PiChatLayout } from "@/plane-web/components/pi-chat/layout";
-
 // plane web components
 import { useWorkspaceFeatures } from "@/plane-web/hooks/store";
-import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 import { EWorkspaceFeatures } from "@/plane-web/types/workspace-feature";
 import type { Route } from "./+types/layout";
 import { PiAppSidebar } from "./sidebar";
@@ -21,26 +18,22 @@ function PiLayout({ params }: Route.ComponentProps) {
   const { isWorkspaceFeatureEnabled } = useWorkspaceFeatures();
 
   return (
-    <AuthenticationWrapper>
-      <WorkspaceAuthWrapper>
-        <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-          <div className="relative flex size-full overflow-hidden">
-            <PiAppSidebar />
-            <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-              {isWorkspaceFeatureEnabled(EWorkspaceFeatures.IS_PI_ENABLED) ? (
-                <WithFeatureFlagHOC workspaceSlug={workspaceSlug?.toString()} flag="PI_CHAT" fallback={<EmptyPiChat />}>
-                  <PiChatLayout shouldRenderSidebarToggle isFullScreen>
-                    <Outlet />
-                  </PiChatLayout>
-                </WithFeatureFlagHOC>
-              ) : (
-                <EmptyPiChat />
-              )}
-            </main>
-          </div>
-        </div>
-      </WorkspaceAuthWrapper>
-    </AuthenticationWrapper>
+    <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+      <div className="relative flex size-full overflow-hidden">
+        <PiAppSidebar />
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          {isWorkspaceFeatureEnabled(EWorkspaceFeatures.IS_PI_ENABLED) ? (
+            <WithFeatureFlagHOC workspaceSlug={workspaceSlug?.toString()} flag="PI_CHAT" fallback={<EmptyPiChat />}>
+              <PiChatLayout shouldRenderSidebarToggle isFullScreen>
+                <Outlet />
+              </PiChatLayout>
+            </WithFeatureFlagHOC>
+          ) : (
+            <EmptyPiChat />
+          )}
+        </main>
+      </div>
+    </div>
   );
 }
 

apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -3,27 +3,23 @@
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
-import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 // plane web components
-import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 import { ProjectAppSidebar } from "./_sidebar";
 
 function WorkspaceLayout() {
   return (
-    <AuthenticationWrapper>
+    <>
       <ProjectsAppPowerKProvider />
-      <WorkspaceAuthWrapper>
-        <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-          <div id="full-screen-portal" className="inset-0 absolute w-full" />
-          <div className="relative flex size-full overflow-hidden">
-            <ProjectAppSidebar />
-            <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-              <Outlet />
-            </main>
-          </div>
+      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+        <div id="full-screen-portal" className="inset-0 absolute w-full" />
+        <div className="relative flex size-full overflow-hidden">
+          <ProjectAppSidebar />
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+            <Outlet />
+          </main>
         </div>
-      </WorkspaceAuthWrapper>
-    </AuthenticationWrapper>
+      </div>
+    </>
   );
 }
 

apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx

@@ -5,30 +5,26 @@ import { Outlet } from "react-router";
 import { ContentWrapper } from "@/components/core/content-wrapper";
 import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
 import { SettingsHeader } from "@/components/settings/header";
-import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 // plane web imports
 import { LicenseSeatsBanner } from "@/plane-web/components/license";
-import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 
 export default function SettingsLayout() {
   return (
-    <AuthenticationWrapper>
-      <WorkspaceAuthWrapper>
-        <ProjectsAppPowerKProvider />
-        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-            <LicenseSeatsBanner />
-            {/* Header */}
-            <SettingsHeader />
-            {/* Content */}
-            <ContentWrapper className="p-page-x md:flex w-full">
-              <div className="w-full h-full overflow-hidden">
-                <Outlet />
-              </div>
-            </ContentWrapper>
-          </main>
-        </div>
-      </WorkspaceAuthWrapper>
-    </AuthenticationWrapper>
+    <>
+      <ProjectsAppPowerKProvider />
+      <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+        <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          <LicenseSeatsBanner />
+          {/* Header */}
+          <SettingsHeader />
+          {/* Content */}
+          <ContentWrapper className="p-page-x md:flex w-full">
+            <div className="w-full h-full overflow-hidden">
+              <Outlet />
+            </div>
+          </ContentWrapper>
+        </main>
+      </div>
+    </>
   );
 }

apps/web/app/(all)/[workspaceSlug]/(wiki)/wiki/layout.tsx

@@ -6,12 +6,10 @@ import { Outlet } from "react-router";
 import { EUserPermissions } from "@plane/constants";
 // wrappers
 import WorkspaceAccessWrapper from "@/layouts/access/workspace-wrapper";
-import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 // plane web components
 import { WikiAppPowerKProvider } from "@/plane-web/components/command-palette/wiki/provider";
 import { WithFeatureFlagHOC } from "@/plane-web/components/feature-flags/with-feature-flag-hoc";
 import { WikiUpgradeScreen } from "@/plane-web/components/wiki/upgrade-screen";
-import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 // local components
 import type { Route } from "./+types/layout";
 import { PagesAppSidebar } from "./_sidebar";
@@ -21,27 +19,22 @@ export default function WikiLayout({ params }: Route.ComponentProps) {
   const { workspaceSlug } = params;
 
   return (
-    <AuthenticationWrapper>
+    <>
       <WikiAppPowerKProvider />
-      <WorkspaceAuthWrapper>
-        <WithFeatureFlagHOC
-          workspaceSlug={workspaceSlug}
-          flag="WORKSPACE_PAGES"
-          fallback={<WikiUpgradeScreen workspaceSlug={workspaceSlug} />}
-        >
-          <WorkspaceAccessWrapper
-            pageKey="pages"
-            allowedPermissions={[EUserPermissions.ADMIN, EUserPermissions.MEMBER]}
-          >
-            <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
-              <PagesAppSidebar />
-              <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-                <Outlet />
-              </main>
-            </div>
-          </WorkspaceAccessWrapper>
-        </WithFeatureFlagHOC>
-      </WorkspaceAuthWrapper>
-    </AuthenticationWrapper>
+      <WithFeatureFlagHOC
+        workspaceSlug={workspaceSlug}
+        flag="WORKSPACE_PAGES"
+        fallback={<WikiUpgradeScreen workspaceSlug={workspaceSlug} />}
+      >
+        <WorkspaceAccessWrapper pageKey="pages" allowedPermissions={[EUserPermissions.ADMIN, EUserPermissions.MEMBER]}>
+          <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+            <PagesAppSidebar />
+            <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+              <Outlet />
+            </main>
+          </div>
+        </WorkspaceAccessWrapper>
+      </WithFeatureFlagHOC>
+    </>
   );
 }

apps/web/app/(all)/[workspaceSlug]/layout.tsx

@@ -2,14 +2,20 @@
 
 import { Outlet } from "react-router";
 import { AppRailProvider } from "@/hooks/context/app-rail-context";
+import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 import { WorkspaceContentWrapper } from "@/plane-web/components/workspace/content-wrapper";
+import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 
 export default function WorkspaceLayout() {
   return (
-    <AppRailProvider>
-      <WorkspaceContentWrapper>
-        <Outlet />
-      </WorkspaceContentWrapper>
-    </AppRailProvider>
+    <AuthenticationWrapper>
+      <WorkspaceAuthWrapper>
+        <AppRailProvider>
+          <WorkspaceContentWrapper>
+            <Outlet />
+          </WorkspaceContentWrapper>
+        </AppRailProvider>
+      </WorkspaceAuthWrapper>
+    </AuthenticationWrapper>
   );
 }