From bfabf128cef81f475a95042d32d240fdc03f652a Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 13 Mar 2026 11:42:46 +0900
Subject: [PATCH] fix: inline splash CSS to prevent SPA fallback breakage on
 cloud environments (#9849)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Inline splash screen CSS into `index.html` to fix broken loading
animation on cloud/ephemeral environments.

## Changes

- **What**: On cloud/ephemeral environments (e.g.
`fe-pr-*.testenvs.comfy.org`), SPA fallback serves `index.html` for
unknown paths. The `<link href="splash.css">` request resolves to
`/cloud/splash.css`, which the server does not find as a static file —
so it returns `index.html` with `200 OK`. The browser receives HTML
instead of CSS, the CSS parser silently ignores it, and the splash
screen renders without any styles or animations.
- Inlined `splash.css` directly into `index.html` `<style>` block —
eliminates the external request entirely
- Moved `splash.css` to `src/assets/` for content-hashed Vite processing
as source of truth
  - Removed `public/splash.css`

## Review Focus

- The inline CSS is byte-for-byte identical to the original
`public/splash.css`
- `src/assets/splash.css` preserved as canonical source for future
changes

[screen-capture
(1).webm](https://github.com/user-attachments/assets/06729641-d1fd-47aa-9dd4-4acd28c2cfcf)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9849-fix-inline-splash-CSS-to-prevent-SPA-fallback-breakage-on-cloud-environments-3226d73d365081418741eb0944a74977)
by [Unito](https://www.unito.io)

Co-authored-by: Amp <amp@ampcode.com>
---
 index.html                        | 55 ++++++++++++++++++++++++++++++-
 {public => src/assets}/splash.css |  0
 2 files changed, 54 insertions(+), 1 deletion(-)
 rename {public => src/assets}/splash.css (100%)

diff --git a/index.html b/index.html
index 1d80c9ec92..5d72443e53 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,60 @@
         border: 0;
       }
     </style>
-    <link rel="stylesheet" href="splash.css" />
+    <style>
+      /* Pre-Vue splash loader — inlined to avoid SPA fallback serving
+         index.html instead of CSS on cloud/ephemeral environments */
+      #splash-loader {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        contain: strict;
+      }
+      #splash-loader svg {
+        width: min(200px, 50vw);
+        height: auto;
+        transform: translateZ(0);
+      }
+      #splash-loader .wave-group {
+        animation: splash-rise 4s ease-in-out infinite alternate;
+        will-change: transform;
+        transform: translateZ(0);
+      }
+      #splash-loader .wave-path {
+        animation: splash-wave 1.2s linear infinite;
+        will-change: transform;
+        transform: translateZ(0);
+      }
+      @keyframes splash-rise {
+        from {
+          transform: translateY(280px);
+        }
+        to {
+          transform: translateY(-80px);
+        }
+      }
+      @keyframes splash-wave {
+        from {
+          transform: translateX(0);
+        }
+        to {
+          transform: translateX(-880px);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        #splash-loader .wave-group,
+        #splash-loader .wave-path {
+          animation: none;
+        }
+        #splash-loader .wave-group {
+          transform: translateY(-80px);
+        }
+      }
+    </style>
     <link rel="manifest" href="manifest.json" />
   </head>
 
diff --git a/public/splash.css b/src/assets/splash.css
similarity index 100%
rename from public/splash.css
rename to src/assets/splash.css