Improve responsive layouts and streamline page loading

app/layout.tsx

@@ -26,6 +26,7 @@ import { SiteSettingsProvider } from "@/components/SiteSettingsProvider";
 import { initialSiteSettings } from "@/lib/site-settings";
 import { rawUser, accountState } from "@/lib/supabase";
 import { LegacyPasswordNotice } from "@/components/LegacyPasswordNotice";
+import { Suspense } from "react";
 export async function generateMetadata(): Promise<Metadata> {
   const { t } = await getI18n();
   return {
@@ -43,11 +44,10 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const [{ locale, preference, detectedLocale }, settings, account] =
-    await Promise.all([getI18n(), initialSiteSettings(), rawUser()]);
-  const active = account
-    ? (await accountState(account.id)) === "active"
-    : false;
+  const [{ locale, preference, detectedLocale }, settings] = await Promise.all([
+    getI18n(),
+    initialSiteSettings(),
+  ]);
   return (
     <html lang={locale} data-theme="dark" suppressHydrationWarning>
       <head>
@@ -62,7 +62,9 @@ export default async function RootLayout({
           <SiteSettingsProvider initialSettings={settings}>
             {children}
             <SiteCursor />
-            <LegacyPasswordNotice enabled={active && !!account?.email} />
+            <Suspense fallback={null}>
+              <AccountPasswordNotice />
+            </Suspense>
           </SiteSettingsProvider>
         </I18nProvider>
         <Analytics />
@@ -70,3 +72,10 @@ export default async function RootLayout({
     </html>
   );
 }
+async function AccountPasswordNotice() {
+  const account = await rawUser();
+  const active = account
+    ? (await accountState(account.id)) === "active"
+    : false;
+  return <LegacyPasswordNotice enabled={active && !!account?.email} />;
+}