From 740ee337ede151a123d3068ffdab3129e3a5c6c3 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Tue, 14 Oct 2025 10:15:46 +0400
Subject: [PATCH] chore: prevent FOUC without using transitions on dev pages

---
 wds-utils.js             | 6 +-----
 web-dev-server.config.js | 9 ++++++++-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/wds-utils.js b/wds-utils.js
index 3b14df173bc..e6706104154 100644
--- a/wds-utils.js
+++ b/wds-utils.js
@@ -4,11 +4,7 @@ export function appendStyles(html) {
   const preventFouc = `
     <style>
       body:not(.resolved) {
-        opacity: 0;
-      }
-
-      body {
-        transition: opacity 0.2s;
+        display: none;
       }
     </style>
 
diff --git a/web-dev-server.config.js b/web-dev-server.config.js
index 1e020710ec0..2e81bb728de 100644
--- a/web-dev-server.config.js
+++ b/web-dev-server.config.js
@@ -51,7 +51,14 @@ export function enforceThemePlugin(theme) {
 
       if (theme === 'aura' && context.response.is('html')) {
         // For dev pages: add Aura Stylesheet
-        body = body.replace('</title>', '</title><link rel="stylesheet" href="/packages/aura/aura.css" />');
+        body = body.replace(
+          '</title>',
+          `
+          </title>
+          <link rel="preload" href="/packages/aura/src/fonts/InstrumentSans/InstrumentSans.woff2" as="font" type="font/woff2" crossorigin>
+          <link rel="stylesheet" href="/packages/aura/aura.css" />
+          `,
+        );
       }
 
       return body;