Add loading indicator to ProfilesPage while user data is being fetched

web/components/profiles/profiles-home.tsx

@@ -217,19 +217,6 @@ export function ProfilesHome() {
   return (
     <div className="lg:grid lg:grid-cols-12 lg:gap-4">
       <Col className={'lg:col-span-9'}>
-        {!user && (
-          <Col className="items-center justify-center min-h-[60vh] gap-6 text-center">
-            <div className="animate-spin rounded-full h-14 w-14 border-4 border-primary-500 border-t-transparent" />
-            <div className="flex flex-col gap-2">
-              <h2 className="text-2xl font-semibold">
-                {t('profiles.loading_dashboard', 'Loading dashboard…')}
-              </h2>
-              <p className="text-ink-500 max-w-sm">
-                {t('profiles.loading_dashboard_desc', 'Hang tight while we set things up for you.')}
-              </p>
-            </div>
-          </Col>
-        )}
         {showSignupBanner && user && (
           <div className="w-full bg-canvas-100 rounded text-center py-3 px-3 relative">
             <Col className="items-center justify-center gap-2">

web/pages/index.tsx

@@ -4,6 +4,7 @@ import {Col} from 'web/components/layout/col'
 import {PageBase} from 'web/components/page-base'
 import {ProfilesHome} from 'web/components/profiles/profiles-home'
 import {useUser} from 'web/hooks/use-user'
+import {useT} from 'web/lib/locale'
 
 // To simulate downtime, you need the error to happen at runtime, not at build time.
 // That means the page must be server-rendered, not statically generated.
@@ -13,9 +14,24 @@ import {useUser} from 'web/hooks/use-user'
 
 export default function ProfilesPage() {
   const user = useUser()
+  const t = useT()
 
   if (user === undefined) {
-    return <PageBase trackPageView={'loading'} />
+    return (
+      <PageBase trackPageView={'loading'}>
+        <Col className="items-center justify-center min-h-[60vh] gap-6 text-center">
+          <div className="animate-spin rounded-full h-14 w-14 border-4 border-primary-500 border-t-transparent" />
+          <div className="flex flex-col gap-2">
+            <h2 className="text-2xl font-semibold">
+              {t('profiles.loading_dashboard', 'Loading dashboard…')}
+            </h2>
+            {/*<p className="text-ink-500 max-w-sm">*/}
+            {/*  {t('profiles.loading_dashboard_desc', 'Hang tight while we set things up for you.')}*/}
+            {/*</p>*/}
+          </div>
+        </Col>
+      </PageBase>
+    )
   }
 
   debug('user:', user)