shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading spinner and noscript fallback to index.html

Browse Source 
Show a CSS-only spinner while JS bundles load, improving perceived
performance on slow connections. Add noscript message for users with
JavaScript disabled.
This commit is contained in:
Nicolas Varrot
2026-02-13 12:26:08 +00:00
parent 3fab1c0f5e
commit ee2b244fcd
1 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -21,7 +21,19 @@
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<div id="root"></div>
<div id="root">
<!-- Loading spinner shown while JS bundles load, replaced by React -->
<div id="app-loader" style="display:flex;align-items:center;justify-content:center;height:100vh;background:#18181b;flex-direction:column;gap:16px;">
<div style="width:40px;height:40px;border:3px solid rgba(255,255,255,0.1);border-top-color:#06b6d4;border-radius:50%;animation:spin 0.8s linear infinite;"></div>
<span style="color:rgba(255,255,255,0.4);font-family:system-ui,sans-serif;font-size:13px;">Loading PinchChat…</span>
</div>
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
</div>
<noscript>
<div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#18181b;color:#a1a1aa;font-family:system-ui,sans-serif;text-align:center;padding:2rem;">
<p>PinchChat requires JavaScript to run. Please enable JavaScript in your browser settings.</p>
</div>
</noscript>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>