fix: APP-877 header missing on project page

web-marketplace/src/clients/regen/Regen.Routes.tsx

@@ -70,6 +70,11 @@ const BasketDetails = safeLazy(
 );
 const BuyCredits = safeLazy(() => import('../../legacy-pages/BuyCredits'));
 const Sell = safeLazy(() => import('../../legacy-pages/Sell/Sell'));
+const ProjectDetails = safeLazy(() =>
+  import('../../components/templates/ProjectDetails/ProjectDetails').then(
+    mod => ({ default: mod.ProjectDetails }),
+  ),
+);
 
 const ChooseCreditClassPage = safeLazy(
   () => import('../../legacy-pages/ChooseCreditClass'),
@@ -300,6 +305,7 @@ export const getRegenRoutes = ({
             />
             <Route path="prefinance" element={<PrefinanceProjects />} />
           </Route>
+          <Route path="project/:projectId" element={<ProjectDetails />} />
           <Route path="project/:projectId/buy" element={<BuyCredits />} />
           <Route
             path="post/:iri"

web-marketplace/src/components/templates/ProjectDetails/ProjectDetails.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import {
   ApolloClient,
   NormalizedCacheObject,
@@ -17,7 +18,6 @@ import { CREATE_POST_DISABLED_TOOLTIP_TEXT } from 'legacy-pages/Dashboard/MyProj
 import { SOLD_OUT_TOOLTIP } from 'legacy-pages/Projects/AllProjects/AllProjects.constants';
 import { getPriceToDisplay } from 'legacy-pages/Projects/hooks/useProjectsSellOrders.utils';
 import dynamic from 'next/dynamic';
-import { useParams } from 'next/navigation';
 
 import ContainedButton from 'web-components/src/components/buttons/ContainedButton';
 import { PrefinanceIcon } from 'web-components/src/components/icons/PrefinanceIcon';
@@ -103,7 +103,7 @@ const Media = dynamic(
 function ProjectDetails(): JSX.Element {
   const { _ } = useLingui();
   const [selectedLanguage] = useAtom(selectedLanguageAtom);
-  const { id: projectId } = useParams<{ id: string }>();
+  const { projectId } = useParams<{ projectId: string }>();
   const { queryClient } = useLedger();
   const { isConnected, isKeplrMobileWeb, wallet, loginDisabled } = useWallet();
   const graphqlClient =

web-marketplace/src/legacy-pages/Dashboard/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import {
   ApolloClient,
@@ -78,13 +78,25 @@ import { useBridgeAvailability } from './hooks/useBridgeAvailabilty';
 import { usePathSection } from './hooks/usePathSection';
 import { useFetchProjectByAdmin } from './MyProjects/hooks/useFetchProjectsByAdmin';
 
+// Preload lazy-loaded dashboard sub-pages to prevent flash on first navigation
+const preloadDashboardPages = () => {
+  import('../Orders');
+  import('./Members');
+  import('../Sell/Sell');
+};
+
 export const Dashboard = () => {
   const { _ } = useLingui();
   const [selectedLanguage] = useAtom(selectedLanguageAtom);
   const { accountChanging, disconnect, loginDisabled, wallet } = useWallet();
   const { loading, activeAccount, activeAccountId, privActiveAccount } =
     useAuth();
 
+  // Preload dashboard sub-pages on mount to eliminate navigation flash
+  useEffect(() => {
+    preloadDashboardPages();
+  }, []);
+
   const [isWarningModalOpen, setIsWarningModalOpen] = useState<
     string | undefined
   >(undefined);
@@ -631,7 +643,9 @@ export const Dashboard = () => {
                           'lg:mt-30 min-h-[520px]',
                       )}
                     >
-                      <Outlet context={dashboardContextValue} />
+                      <Suspense fallback={null}>
+                        <Outlet context={dashboardContextValue} />
+                      </Suspense>
                     </div>
                   </WithLoader>
                 </div>