From 5b79da9cd234df449502a04cbf48663ef0206813 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 27 Oct 2023 11:38:03 +0200
Subject: [PATCH 1/5] Add loading overlay while hydrating

---
 frontend/src/routes/+layout.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 75bd9b4bc..97a1ce91f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -11,6 +11,8 @@
   import { Duration } from '$lib/util/time';
   import { browser } from '$app/environment';
   import t from '$lib/i18n';
+  import { onMount } from 'svelte';
+  import { blur } from 'svelte/transition';
 
   export let data: LayoutData;
   const { page, updated } = getStores();
@@ -22,6 +24,9 @@
       notifyWarning($t('notifications.update_detected'), Duration.Long);
     }
   }
+
+  let unhydrated = true;
+  onMount(() => unhydrated = false);
 </script>
 
 <svelte:head>
@@ -34,6 +39,13 @@
   {/if}
 </svelte:head>
 
+{#if unhydrated}
+  <div class="fixed top-0 bottom-0 left-0 right-0 z-10 flex flex-col items-center justify-center" out:blur={{duration: 1000}}>
+    <span class="loading loading-spinner bg-primary w-24 z-10"></span>
+    <div class="absolute top-0 bottom-0 left-0 right-0 bg-base-100 opacity-60"></div>
+  </div>
+{/if}
+
 <div class="flex flex-col justify-between min-h-full">
   <div class="flex flex-col flex-grow">
     <slot />

From e64e8e8f5c407b14e52dffe22c0f7eb01c72ce23 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 27 Oct 2023 11:41:47 +0200
Subject: [PATCH 2/5] Use skeleton/hide elements during hydration Instead of
 covering with overlay, because (1) it's weird to cover up a loaded page (2)
 it doesn't block keypresses

---
 frontend/src/lib/app.postcss       | 43 ++++++++++++++++++++++++++++++
 frontend/src/routes/+layout.svelte | 10 +------
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/app.postcss b/frontend/src/lib/app.postcss
index 3c3df868a..b835f2f4f 100644
--- a/frontend/src/lib/app.postcss
+++ b/frontend/src/lib/app.postcss
@@ -124,3 +124,46 @@ table tr:nth-last-child(-n + 2) .dropdown {
     transition: background-color 0.5s;
   }
 }
+
+.unhydrated {
+    .input, input, button {
+        visibility: hidden;
+    }
+
+    form {
+        & > * {
+            visibility: hidden;
+        }
+
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            @apply w-full h-full;
+            @apply rounded-xl;
+
+            background-image: linear-gradient(110deg, var(--tw-gradient-stops));
+            @apply from-base-300;
+            @apply via-neutral-600;
+            @apply to-base-300;
+            background-size: 400% 400%;
+            animation: gradient 5s ease-in-out infinite;
+
+            @keyframes gradient {
+                0% {
+                    background-position: 0% 50%;
+                }
+                50% {
+                    background-position: 100% 50%;
+                }
+                100% {
+                    background-position: 0% 50%;
+                }
+            }
+
+        }
+    }
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 97a1ce91f..f8e7d68bb 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -12,7 +12,6 @@
   import { browser } from '$app/environment';
   import t from '$lib/i18n';
   import { onMount } from 'svelte';
-  import { blur } from 'svelte/transition';
 
   export let data: LayoutData;
   const { page, updated } = getStores();
@@ -39,14 +38,7 @@
   {/if}
 </svelte:head>
 
-{#if unhydrated}
-  <div class="fixed top-0 bottom-0 left-0 right-0 z-10 flex flex-col items-center justify-center" out:blur={{duration: 1000}}>
-    <span class="loading loading-spinner bg-primary w-24 z-10"></span>
-    <div class="absolute top-0 bottom-0 left-0 right-0 bg-base-100 opacity-60"></div>
-  </div>
-{/if}
-
-<div class="flex flex-col justify-between min-h-full">
+<div class="flex flex-col justify-between min-h-full" class:unhydrated>
   <div class="flex flex-col flex-grow">
     <slot />
   </div>

From b6aa7267712cb1d72b7c281aa892a8ad6e297448 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 27 Oct 2023 11:42:46 +0200
Subject: [PATCH 3/5] Wait for Load instead of NetworkIdle We don't have to
 wait until NetworkIdle/Hydrated, because the app blocks user interaction
 automatically.

---
 backend/Testing/Browser/Page/BasePage.cs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/backend/Testing/Browser/Page/BasePage.cs b/backend/Testing/Browser/Page/BasePage.cs
index 0eec14d9c..ce167b5f7 100644
--- a/backend/Testing/Browser/Page/BasePage.cs
+++ b/backend/Testing/Browser/Page/BasePage.cs
@@ -36,11 +36,11 @@ public async Task<T> WaitFor()
     {
         if (Url is not null)
         {
-            await Page.WaitForURLAsync(Url, new() { WaitUntil = WaitUntilState.NetworkIdle });
+            await Page.WaitForURLAsync(Url, new() { WaitUntil = WaitUntilState.Load });
         }
         else
         {
-            await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+            await Page.WaitForLoadStateAsync(LoadState.Load);
         }
         await Task.WhenAll(TestLocators.Select(l => l.WaitForAsync()));
         return (T)this;

From 1311e976ece1e3311aa67e08af39e679cccf9960 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 27 Oct 2023 13:37:32 +0200
Subject: [PATCH 4/5] Use simpler hydration/loading animation

---
 frontend/src/lib/app.postcss | 58 +++++++++++++-----------------------
 1 file changed, 21 insertions(+), 37 deletions(-)

diff --git a/frontend/src/lib/app.postcss b/frontend/src/lib/app.postcss
index b835f2f4f..6f3c5b044 100644
--- a/frontend/src/lib/app.postcss
+++ b/frontend/src/lib/app.postcss
@@ -126,44 +126,28 @@ table tr:nth-last-child(-n + 2) .dropdown {
 }
 
 .unhydrated {
-    .input, input, button {
-        visibility: hidden;
+  .input,
+  input,
+  button {
+    visibility: hidden;
+  }
+
+  form {
+    & > * {
+      visibility: hidden;
     }
 
-    form {
-        & > * {
-            visibility: hidden;
-        }
-
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            @apply w-full h-full;
-            @apply rounded-xl;
-
-            background-image: linear-gradient(110deg, var(--tw-gradient-stops));
-            @apply from-base-300;
-            @apply via-neutral-600;
-            @apply to-base-300;
-            background-size: 400% 400%;
-            animation: gradient 5s ease-in-out infinite;
-
-            @keyframes gradient {
-                0% {
-                    background-position: 0% 50%;
-                }
-                50% {
-                    background-position: 100% 50%;
-                }
-                100% {
-                    background-position: 0% 50%;
-                }
-            }
-
-        }
+    position: relative;
+
+    &::before {
+      content: '';
+      @apply loading loading-ring bg-primary;
+      @apply h-32 max-h-full w-auto;
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
     }
+  }
 }

From 9dad138feacd43e8ed87c1978733cd3b6bebe087 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 31 Oct 2023 11:55:29 +0100
Subject: [PATCH 5/5] Rename variable to 'hydrating'

---
 frontend/src/lib/app.postcss       | 2 +-
 frontend/src/routes/+layout.svelte | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/app.postcss b/frontend/src/lib/app.postcss
index 6f3c5b044..903448514 100644
--- a/frontend/src/lib/app.postcss
+++ b/frontend/src/lib/app.postcss
@@ -125,7 +125,7 @@ table tr:nth-last-child(-n + 2) .dropdown {
   }
 }
 
-.unhydrated {
+.hydrating {
   .input,
   input,
   button {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index f8e7d68bb..eff79487b 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -24,8 +24,8 @@
     }
   }
 
-  let unhydrated = true;
-  onMount(() => unhydrated = false);
+  let hydrating = true;
+  onMount(() => hydrating = false);
 </script>
 
 <svelte:head>
@@ -38,7 +38,7 @@
   {/if}
 </svelte:head>
 
-<div class="flex flex-col justify-between min-h-full" class:unhydrated>
+<div class="flex flex-col justify-between min-h-full" class:hydrating>
   <div class="flex flex-col flex-grow">
     <slot />
   </div>