dashboard: add retention and quick fix loading states

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/page-layout.tsx

@@ -1,23 +1,16 @@
 import DarkModeToggle from '@/components/dark-mode-toggle';
+import withSuspense from '@/hocs/with-suspense';
 
-import {
-  getCurrentProjects,
-  getProjectsByOrganizationSlug,
-} from '@openpanel/db';
+import { getCurrentProjects } from '@openpanel/db';
 
 import LayoutProjectSelector from './layout-project-selector';
 
 interface PageLayoutProps {
-  children: React.ReactNode;
   title: React.ReactNode;
   organizationSlug: string;
 }
 
-export default async function PageLayout({
-  children,
-  title,
-  organizationSlug,
-}: PageLayoutProps) {
+async function PageLayout({ title, organizationSlug }: PageLayoutProps) {
   const projects = await getCurrentProjects(organizationSlug);
 
   return (
@@ -31,7 +24,16 @@ export default async function PageLayout({
           {projects.length > 0 && <LayoutProjectSelector projects={projects} />}
         </div>
       </div>
-      <div>{children}</div>
     </>
   );
 }
+
+const Loading = ({ title }: PageLayoutProps) => (
+  <>
+    <div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-background px-4 pl-12 lg:pl-4">
+      <div className="text-xl font-medium">{title}</div>
+    </div>
+  </>
+);
+
+export default withSuspense(PageLayout, Loading);