MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace ugly Loading... text with spinner across all apps

Browse Source 
- Updated default HydrateFallback in file-based-routing to show a
  centered blue spinner instead of bare "Loading..." text
- Added inline spinner to all index.html root divs so users see a
  spinner immediately while JS bundles load (instead of blank white)
- Affects: dimentorin, hackathon, backoffice, gacha, qrcampaign, infra

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
maulanasdqn
2026-04-10 14:47:24 +07:00
co-authored by Claude Opus 4.6
parent 7f5948724b
commit 0193245551
7 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/backoffice/index.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<div id="root"></div>
<div id="root"><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
apps/dimentorin/index.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<div id="root"></div>
<div id="root"><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
apps/gacha/index.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<div id="root"></div>
<div id="root"><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
apps/hackathon/index.html
+1 -1
View File
@@ -37,7 +37,7 @@
/>
</head>
<body>
<div id="root"></div>
<div id="root"><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
apps/infra/index.html
+1 -1
View File
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<div id="root"></div>
<div id="root"><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
apps/qrcampaign/index.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="icon" type="image/svg+xml" href="/images/imphnen-logo.svg" />
</head>
<body>
<div id="root"></div>
<div id="root"><div style="display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f9fafb"><div style="width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite"></div></div><style>@keyframes spin{to{transform:rotate(360deg)}}</style></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
libs/utils/src/react-router/file-based-routing.tsx
+16 -2
View File
@@ -237,7 +237,14 @@ function createRoute(args: {
if (pageType === 'page' || pageType === 'layout') {
route.element = <args.PageComponent />;
route.HydrateFallback =
args.LoadingComponent ?? (() => <div>Loading...</div>);
args.LoadingComponent ?? (() => (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#f9fafb' }}>
<div style={{ textAlign: 'center' }}>
<div style={{ width: 40, height: 40, border: '3px solid #e5e7eb', borderTopColor: '#3b82f6', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 12px' }} />
<style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
</div>
</div>
));
route.action = args.action;
route.loader = async (...props) => {
if (!(await args.guard?.())) {
@@ -256,7 +263,14 @@ function createRoute(args: {
return {
path: `${cleanPath}/${nextSegment}`,
element: <args.PageComponent />,
HydrateFallback: args.LoadingComponent ?? (() => <div>Loading...</div>),
HydrateFallback: args.LoadingComponent ?? (() => (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#f9fafb' }}>
<div style={{ textAlign: 'center' }}>
<div style={{ width: 40, height: 40, border: '3px solid #e5e7eb', borderTopColor: '#3b82f6', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 12px' }} />
<style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
</div>
</div>
)),
action: args.action,
loader: args.loader,
handle: { pageType: pageType as 'layout' | 'page' },