mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 02:32:18 +00:00
fix: inline splash CSS to prevent SPA fallback breakage on cloud environments (#9849)
## 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>
This commit is contained in:
55
index.html
55
index.html
@@ -47,7 +47,60 @@
|
|||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</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" />
|
<link rel="manifest" href="manifest.json" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user