Skip to content

Commit f218c56

Browse files
tzarebczantzarebczan
committed
Removes dedicated spinner page, service directly
Removes the dedicated spinner page and implements a route that serves static HTML for the spinner. This change simplifies the routing configuration and improves performance by serving a static HTML file instead of rendering a React component for the spinner page.
1 parent 8c4b29a commit f218c56

File tree

8 files changed

+137
-115
lines changed

8 files changed

+137
-115
lines changed

‎ui/component/router/view.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const IconsViewerPage = lazyImport(() => import('page/iconsViewer' /* webpackChu
4545

4646
const FypPage = lazyImport(() => import('web/page/fyp' /* webpackChunkName: "fyp" */));
4747
const YouTubeTOSPage = lazyImport(() => import('web/page/youtubetos' /* webpackChunkName: "youtubetos" */));
48-
const SpinnerPage = lazyImport(() => import('web/page/spinner' /* webpackChunkName: "spinner" */));
4948

5049
const SignInPage = lazyImport(() => import('page/signIn' /* webpackChunkName: "signIn" */));
5150
const SignInWalletPasswordPage = lazyImport(() =>
@@ -407,7 +406,6 @@ function AppRouter(props: Props) {
407406
<Route path={`/$/${PAGES.CAREERS_SENIOR_IOS_DEVELOPER}`} exact component={SeniorIosDeveloperPage} />
408407
<Route path={`/$/${PAGES.FYP}`} exact component={FypPage} />
409408
<Route path={`/$/${PAGES.YOUTUBE_TOS}`} exact component={YouTubeTOSPage} />
410-
<Route path={`/$/${PAGES.SPINNER}`} exact component={SpinnerPage} />
411409
<Route path={`/$/${PAGES.ICONS_VIEWER}`} exact component={IconsViewerPage} />
412410

413411
<Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />

‎ui/constants/pages.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,4 +115,3 @@ exports.CAREERS_SENIOR_ANDROID_DEVELOPER = 'careers/senior_android_developer';
115115
exports.CAREERS_SENIOR_IOS_DEVELOPER = 'careers/senior_ios_developer';
116116
exports.ICONS_VIEWER = 'icons_viewer';
117117
exports.HIDDEN_CONTENT = 'hidden';
118-
exports.SPINNER = 'spinner';

‎ui/scss/all.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@
5454
@import 'component/section';
5555
@import 'component/snack-bar';
5656
@import 'component/spinner';
57-
@import 'component/spinner-page';
5857
@import 'component/splash';
5958
@import 'component/status-bar';
6059
@import 'component/syntax-highlighter';

‎ui/scss/component/_spinner-page.scss‎

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎web/page/spinner/index.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎web/page/spinner/view.jsx‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎web/src/routes.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const { getRss } = require('./rss');
88
const { getFarcasterManifest } = require('./farcaster');
99
const { handleFramePost } = require('./frame');
1010
const { getTempFile } = require('./tempfile');
11+
const { getSpinnerHtml } = require('./spinner');
1112

1213
const fetch = require('node-fetch');
1314
const Router = require('@koa/router');
@@ -79,6 +80,11 @@ router.get(`/$/rss/:claimName::claimId`, rssMiddleware);
7980

8081
router.get(`/$/oembed`, oEmbedMiddleware);
8182

83+
router.get(`/$/spinner`, async (ctx) => {
84+
ctx.set('Content-Type', 'text/html');
85+
ctx.body = getSpinnerHtml(ctx);
86+
});
87+
8288
router.post(`/$/frame`, async (ctx) => {
8389
// Minimal JSON parser to avoid external dependencies
8490
try {

‎web/src/spinner.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
function getSpinnerHtml(ctx) {
2+
const themeParam = ctx.query.theme;
3+
const theme = themeParam === 'light' || themeParam === 'dark' ? themeParam : null;
4+
5+
// If no theme param, we'll use CSS media query to detect browser preference
6+
const useSystemTheme = !theme;
7+
8+
return `<!DOCTYPE html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8">
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
13+
<title>Loading - Odysee</title>
14+
<style>
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
body {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
min-height: 100vh;
26+
width: 100%;
27+
position: fixed;
28+
top: 0;
29+
left: 0;
30+
right: 0;
31+
bottom: 0;
32+
${
33+
useSystemTheme
34+
? `
35+
background-color: #0b0b0d;
36+
`
37+
: theme === 'dark'
38+
? `
39+
background-color: #0b0b0d;
40+
`
41+
: `
42+
background-color: #f7f7f7;
43+
`
44+
}
45+
}
46+
47+
${
48+
useSystemTheme
49+
? `
50+
@media (prefers-color-scheme: light) {
51+
body {
52+
background-color: #f7f7f7;
53+
}
54+
}
55+
`
56+
: ''
57+
}
58+
59+
.spinner-container {
60+
position: relative;
61+
width: 120px;
62+
height: 120px;
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
}
67+
68+
.spinner-logo {
69+
position: absolute;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
width: 64px;
74+
height: 64px;
75+
}
76+
77+
.spinner-logo svg {
78+
width: 100%;
79+
height: 100%;
80+
}
81+
82+
.spinner-ring {
83+
position: absolute;
84+
width: 100px;
85+
height: 100px;
86+
border-radius: 50%;
87+
border: 3px solid transparent;
88+
border-top-color: #f24158;
89+
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
90+
}
91+
92+
@keyframes spin {
93+
0% {
94+
transform: rotate(0deg);
95+
}
96+
100% {
97+
transform: rotate(360deg);
98+
}
99+
}
100+
</style>
101+
</head>
102+
<body>
103+
<div class="spinner-container">
104+
<div class="spinner-ring"></div>
105+
<div class="spinner-logo">
106+
<svg viewBox="0 0 103.1 103.1" xmlns="http://www.w3.org/2000/svg">
107+
<defs>
108+
<linearGradient id="g" x1="37.15" y1="1.79" x2="79.91" y2="149.73" gradientUnits="userSpaceOnUse">
109+
<stop offset="0" stop-color="#EF1970"/>
110+
<stop offset=".14" stop-color="#F23B5C"/>
111+
<stop offset=".45" stop-color="#F77D35"/>
112+
<stop offset=".7" stop-color="#FCAD18"/>
113+
<stop offset=".89" stop-color="#FECB07"/>
114+
<stop offset="1" stop-color="#FFD600"/>
115+
</linearGradient>
116+
<clipPath id="c">
117+
<circle cx="51.5" cy="51.5" r="51.5"/>
118+
</clipPath>
119+
</defs>
120+
<circle cx="51.5" cy="51.5" r="51.5" fill="url(#g)"/>
121+
<g clip-path="url(#c)">
122+
<path fill="#fff" d="M89.2,85.1c-1.3-5.8-3.1-10.9-6.1-18.5c-2-5.2-8.8-11.6-13.1-14.8c-1.6-1.2-1.7-3.4-0.3-4.9C74,42.9,81.6,35,84,30.8c1.6-2.9,4.7-8.5,4.9-13.3C89.2,14,88.7,9.9,84,8c-4.3-1.7-7.1,0.9-7.1,0.9c-3,2.1-3.9,7.7-6.1,13.3c-2.4,6.5-6.3,7.3-8.3,7.3c-1.9,0-0.7-2.1-5.4-15.6c-4.7-13.4-17-11-26.3-5.4c-11.8,7.1-6.6,22.1-3.6,31.9c-1.6,1.6-7.9,2.8-13.5,5.9c-3.5,1.9-6.5,3.1-9.5,5.5c-4.1,3.3-5.9,7-4.4,12.1c0.3,1.1,1.4,2.9,3.6,4.1c3.3,1.5,8.3-0.7,15.8-6.3c5.5-3.7,11.9-5.6,11.9-5.6s4.6,7,8.8,15.3c4.2,8.3-4.6,11-5.5,11c-1,0-14.8-1.3-11.6,10.4c3,11.6,19.9,7.5,28.5,1.8s6.5-24.2,6.5-24.2c8.4-1.3,11,7.6,11.8,12.1c0.8,4.5-1,12.4,7.5,12.6c1.2,0,2.4-0.2,3.5-0.5c4.6-1.1,7.2-3.4,8.3-5.8C89.4,87.6,89.5,86.3,89.2,85.1z M46.9,30.1c-8.6,3.2-12.7-1-13.2-8.8c-0.6-8.8,7.6-11,7.6-11c9.1-3,11.5,1.3,13.7,7.8C57,24.6,55.4,26.9,46.9,30.1z"/>
123+
</g>
124+
</svg>
125+
</div>
126+
</div>
127+
</body>
128+
</html>`;
129+
}
130+
131+
module.exports = { getSpinnerHtml };

0 commit comments

Comments
 (0)