Add loading indicator with timeout for ProfilesPage while user data is being fetched

Author: MartinBraquet

common/messages/de.json

@@ -1099,6 +1099,9 @@
   "profiles.seeing_all_profiles": "Sie sehen alle Profile. Verwenden Sie Suche oder Filter, um einzugrenzen.",
   "profiles.show_filters": "Filter anzeigen",
   "profiles.sort_differently": "Anders sortieren",
+  "profiles.loading_dashboard": "Dashboard wird geladen…",
+  "profiles.loading_dashboard_desc": "Der Server startet gerade, bitte warten.",
+  "profiles.loading_slow": "Noch am Starten — gleich geht's los…",
   "profiles.title": "Personen",
   "profiles.try_keyword_search": "Schlüsselwortsuche versuchen",
   "referrals.title": "Lade jemanden ein, Compass beizutreten!",

common/messages/fr.json

@@ -1098,6 +1098,9 @@
   "profiles.seeing_all_profiles": "Vous voyez tous les profils. Utilisez la recherche ou les filtres pour affiner.",
   "profiles.show_filters": "Voir les filtres",
   "profiles.sort_differently": "Trier différemment",
+  "profiles.loading_dashboard": "Chargement du tableau de bord…",
+  "profiles.loading_dashboard_desc": "Le serveur démarre, patientez un instant.",
+  "profiles.loading_slow": "Démarrage en cours — encore quelques secondes…",
   "profiles.title": "Personnes",
   "profiles.try_keyword_search": "Essayer une recherche par mot-clé",
   "referrals.title": "Invitez quelqu'un à rejoindre Compass !",

web/pages/index.tsx

@@ -1,8 +1,10 @@
 import {debug} from 'common/logger'
+import {useEffect, useState} from 'react'
 import {LoggedOutHome} from 'web/components/home/home'
 import {Col} from 'web/components/layout/col'
 import {PageBase} from 'web/components/page-base'
 import {ProfilesHome} from 'web/components/profiles/profiles-home'
+import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {useUser} from 'web/hooks/use-user'
 import {useT} from 'web/lib/locale'
 
@@ -15,20 +17,29 @@ import {useT} from 'web/lib/locale'
 export default function ProfilesPage() {
   const user = useUser()
   const t = useT()
+  const [slowLoad, setSlowLoad] = useState(false)
+
+  useEffect(() => {
+    if (user !== undefined) return
+    const timer = setTimeout(() => setSlowLoad(true), 5000)
+    return () => clearTimeout(timer)
+  }, [user])
 
   if (user === undefined) {
     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">
+        <Col className="items-center gap-8 px-4 py-8">
+          <Col className="items-center gap-3 text-center pt-8">
+            <CompassLoadingIndicator />
             <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>
+            <p className="text-ink-500 max-w-sm text-sm">
+              {slowLoad
+                ? t('profiles.loading_slow', 'Still starting up — almost there…')
+                : t('profiles.loading_dashboard_desc', 'The server is waking up, hang tight.')}
+            </p>
+          </Col>
         </Col>
       </PageBase>
     )