Skip to content

Commit 4402389

Browse files
Sn0wo2Sn0wo2
committed
feat(frontend): skeleton loading
Signed-off-by: Me0wo <152751263+Sn0wo2@users.noreply.github.com>
1 parent 12a0d64 commit 4402389

7 files changed

Lines changed: 54 additions & 71 deletions

File tree

‎Frontend/index.html‎

Lines changed: 19 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,38 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8"/>
5-
<link href="/logo.png" rel="icon" type="image/png"/>
65
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
7-
86
<title>QuickNote - Fast and Easy Note Taking</title>
9-
<meta
10-
content="QuickNote is a simple and fast note-taking application to capture your ideas and to-dos."
11-
name="description"
12-
/>
13-
<meta
14-
content="QuickNote, notes, note taking app, productivity, to-do list"
15-
name="keywords"
16-
/>
7+
<meta content="QuickNote is a simple and fast note-taking application to capture your ideas and to-dos." name="description"/>
8+
<meta content="QuickNote, notes, note taking app, productivity, to-do list" name="keywords"/>
9+
<link href="/quicknote.svg" rel="icon" type="image/png"/>
1710

18-
<style>
19-
#root .loader-container {
11+
<style data-loader-style>
12+
html, body {
13+
margin: 0;
14+
padding: 0;
15+
}
16+
#root > .loader-container {
2017
display: flex;
2118
justify-content: center;
2219
align-items: center;
2320
height: 100vh;
2421
}
25-
26-
#root .loader {
22+
#root > .loader-container > .loader {
2723
border: 5px solid #f3f3f3;
2824
border-top: 5px solid #3498db;
2925
border-radius: 50%;
3026
width: 50px;
3127
height: 50px;
3228
animation: spin 1s linear infinite;
3329
}
34-
3530
@keyframes spin {
36-
0% {
37-
transform: rotate(0deg);
38-
}
39-
100% {
40-
transform: rotate(360deg);
41-
}
31+
0% { transform: rotate(0deg); }
32+
100% { transform: rotate(360deg); }
4233
}
4334
</style>
4435
</head>
4536
<body>
46-
4737
<div id="root">
4838
<div class="loader-container">
4939
<div class="loader"></div>
@@ -52,18 +42,15 @@
5242

5343
<noscript>
5444
<style>
55-
#root {
56-
display: none;
57-
}
58-
59-
html,
60-
body {
45+
html, body {
6146
height: 100%;
6247
margin: 0;
6348
font-family: system-ui, -apple-system, sans-serif;
6449
background-color: #f9f9f9;
6550
}
66-
51+
#root {
52+
display: none;
53+
}
6754
.noscript-container {
6855
height: 100vh;
6956
display: flex;
@@ -74,15 +61,13 @@
7461
padding: 20px;
7562
box-sizing: border-box;
7663
}
77-
7864
.logo {
7965
display: block;
8066
width: 250px;
8167
max-width: 80%;
8268
height: auto;
8369
margin-bottom: 2rem;
8470
}
85-
8671
.noscript-message {
8772
background-color: #fff0f0;
8873
border-radius: 10px;
@@ -93,28 +78,20 @@
9378
font-size: 1.25rem;
9479
max-width: 500px;
9580
}
96-
9781
.noscript-message a {
9882
color: #337ab7;
9983
font-weight: bold;
10084
}
10185
</style>
102-
10386
<div class="noscript-container">
104-
<img alt="QuickNote Logo" class="logo" src="/logo.png"/>
87+
<img alt="QuickNote Logo" class="logo" src="/quicknote.svg"/>
10588
<div class="noscript-message">
10689
⚠️ JavaScript is disabled in your browser.<br/><br/>
107-
Please
108-
<a
109-
href="https://www.enable-javascript.com"
110-
rel="noopener noreferrer"
111-
target="_blank"
112-
>enable JavaScript</a>
113-
to use this application.
90+
Please <a href="https://www.enable-javascript.com" rel="noopener noreferrer" target="_blank">enable JavaScript</a> to use this application.
11491
</div>
11592
</div>
11693
</noscript>
11794

11895
<script src="/src/Main.tsx" type="module"></script>
11996
</body>
120-
</html>
97+
</html>

‎Frontend/public/logo.png‎

-1.3 MB
Binary file not shown.

‎Frontend/src/Main.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import { StrictMode } from "react";
44
import { createRoot } from "react-dom/client";
55
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
66

7-
createRoot(document.getElementById("root")!).render(
7+
const rootElement = document.getElementById("root");
8+
9+
if (rootElement) rootElement.innerHTML = "";
10+
11+
document.querySelectorAll('style[data-loader-style]').forEach((el) => el.remove());
12+
13+
createRoot(rootElement!).render(
814
<StrictMode>
915
<Router>
1016
<Routes>
@@ -14,4 +20,4 @@ createRoot(document.getElementById("root")!).render(
1420
</Routes>
1521
</Router>
1622
</StrictMode>
17-
);
23+
);

‎Frontend/src/components/DarkMode.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
width: 0;
119119
height: 0;
120120
border-radius: 50%;
121-
background: var(--text -primary);
121+
background: var(--text-primary);
122122
pointer-events: none;
123123
z-index: variables.$z-index-high;
124124
transform: translate(-50%, -50%);

‎Frontend/src/router/Home.scss‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,5 @@
11
@use '@/styles/variables';
22

3-
html {
4-
font-size: clamp(14px, 1.2vw + 0.5rem, 18px);
5-
}
6-
7-
a {
8-
color: var(--link-primary);
9-
transition: variables.$color-transition;
10-
11-
&:hover {
12-
color: var(--link-hover);
13-
}
14-
}
15-
16-
body {
17-
position: fixed;
18-
inset: 0;
19-
background: var(--bg-primary);
20-
color: var(--text-primary);
21-
display: flex;
22-
justify-content: center;
23-
align-items: center;
24-
transition: variables.$color-transition;
25-
}
26-
273
.background {
284
width: 50vmin;
295
aspect-ratio: 1;
@@ -69,7 +45,7 @@ body {
6945
transform: translate(-50%, -50%);
7046
width: 30%;
7147
aspect-ratio: 1;
72-
background-image: url('/logo.png');
48+
background-image: url('/quicknote.svg');
7349
background-size: contain;
7450
background-repeat: no-repeat;
7551
background-position: center;

‎Frontend/src/router/Note.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export function Note() {
9898
</button>
9999
))}
100100
</div>
101-
<img className="note-logo" src="/logo.png" alt="logo" />
101+
<img className="note-logo" src="/quicknote.svg" alt="logo" />
102102
<div className="right-buttons">
103103
<button className="sync" onClick={load}>Sync</button>
104104
<input

‎Frontend/src/styles/_variables.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,27 @@ $z-index-middle: 100;
7070
$z-index-high: 999;
7171
$z-index-top: 1000;
7272
$z-index-max: 10000;
73+
74+
html {
75+
font-size: clamp(14px, 1.2vw + 0.5rem, 18px);
76+
}
77+
78+
a {
79+
color: var(--link-primary);
80+
transition: $color-transition;
81+
82+
&:hover {
83+
color: var(--link-hover);
84+
}
85+
}
86+
87+
body {
88+
position: absolute;
89+
inset: 0;
90+
background: var(--bg-surface);
91+
color: var(--text-primary);
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
transition: $color-transition;
96+
}

0 commit comments

Comments
 (0)