chore(demo): preload fonts to prevent layout shifts

MartinCupela · MartinCupela · commit 816d9a58dfe4 · 2026-04-28T17:04:11.000+02:00
diff --git a/examples/vite/index.html b/examples/vite/index.html
@@ -5,6 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Stream Chat React</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" />
+    <link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/geist/v4/gyByhwUxId8gMEwcGFU.woff2" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss
@@ -1,6 +1,7 @@
 @layer stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
 
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
+// Geist font is preloaded in index.html to avoid layout shift on mount.
+//@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
 
 // v3 CSS import
 @import url('stream-chat-react/dist/css/index.css') layer(stream-new);
