From c5403f786f077b63b2c9b0bd69340d75b40f94e0 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Wed, 1 Jul 2026 11:20:49 -0700
Subject: [PATCH] Prevent font size flash on settings change

---
 src/lib/components/base.css |  1 +
 src/routes/+layout.svelte   | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/base.css b/src/lib/components/base.css
index 06ab2a96..5556530c 100644
--- a/src/lib/components/base.css
+++ b/src/lib/components/base.css
@@ -58,6 +58,7 @@
   --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
 
   text-size-adjust: 100%;
+  font-size: 110%;
 }
 
 @layer base {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ed5a1fc3..23d2e022 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import "@lib/components/theme.css"
   import "@welshman/editor/index.css"
+  import {debounce} from "throttle-debounce"
   import * as nip19 from "nostr-tools/nip19"
   import type {Unsubscriber} from "svelte/store"
   import {get} from "svelte/store"
@@ -272,10 +273,12 @@
         document.body.setAttribute("data-theme", $theme)
         document.body.setAttribute("data-fl-theme", env.FL_THEME)
       }),
-      userSettingsValues.subscribe($userSettingsValues => {
-        // @ts-ignore
-        document.documentElement.style["font-size"] = `${$userSettingsValues.font_size}rem`
-      }),
+      userSettingsValues.subscribe(
+        debounce(100, $userSettingsValues => {
+          // @ts-ignore
+          document.documentElement.style["font-size"] = `${$userSettingsValues.font_size}rem`
+        }),
+      ),
     )
 
     return () => unsubscribers.forEach(call)