Skip to content

Commit 089989f

Browse files
MiodecMiodec
authored
refactor: convert background loader to solid (@Miodec) (monkeytypegame#7387)
2 parents 3aaf8e0 + 290bf00 commit 089989f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+265
-177
lines changed

‎frontend/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<load src="html/head.html" />
44

55
<body>
6+
<LoaderBar />
67
<div id="mediaQueryDebug"></div>
78
<load src="html/warnings.html" />
89
<div id="fpsCounter" class="hidden"></div>
910
<div class="customBackground"></div>
10-
<div id="backgroundLoader" class="hidden"></div>
1111
<div id="bannerCenter" class="focus"></div>
1212
<div id="notificationCenter">
1313
<div class="clearAll button hidden">

‎frontend/src/styles/core.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,8 @@ body {
186186
}
187187

188188
#backgroundLoader {
189-
height: 3px;
189+
top: 0;
190+
height: 0.25rem;
190191
position: fixed;
191192
width: 100%;
192193
background: var(--main-color);

‎frontend/src/ts/auth.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import * as Notifications from "./elements/notifications";
33
import Config, { applyConfig, saveFullConfigToLocalStorage } from "./config";
44
import * as Misc from "./utils/misc";
55
import * as DB from "./db";
6-
import * as Loader from "./elements/loader";
6+
import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
77
import * as LoginPage from "./pages/login";
88
import * as RegisterCaptchaModal from "./modals/register-captcha";
99
import {
@@ -43,15 +43,15 @@ async function sendVerificationEmail(): Promise<void> {
4343
return;
4444
}
4545

46-
Loader.show();
46+
showLoaderBar();
4747
qs(".sendVerificationEmail")?.disable();
4848
const response = await Ape.users.verificationEmail();
4949
qs(".sendVerificationEmail")?.enable();
5050
if (response.status !== 200) {
51-
Loader.hide();
51+
hideLoaderBar();
5252
Notifications.add("Failed to request verification email", -1, { response });
5353
} else {
54-
Loader.hide();
54+
hideLoaderBar();
5555
Notifications.add("Verification email sent", 1);
5656
}
5757
}
@@ -296,16 +296,16 @@ async function addAuthProvider(
296296
});
297297
return;
298298
}
299-
Loader.show();
299+
showLoaderBar();
300300
const user = getAuthenticatedUser();
301301
if (!user) return;
302302
try {
303303
await linkWithPopup(user, provider);
304-
Loader.hide();
304+
hideLoaderBar();
305305
Notifications.add(`${providerName} authentication added`, 1);
306306
AuthEvent.dispatch({ type: "authConfigUpdated" });
307307
} catch (error) {
308-
Loader.hide();
308+
hideLoaderBar();
309309
const message = Misc.createErrorMessage(
310310
error,
311311
`Failed to add ${providerName} authentication`,

‎frontend/src/ts/commandline/commandline.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
getCommandlineSubgroup,
1313
setCommandlineSubgroup,
1414
} from "../signals/core";
15-
import * as Loader from "../elements/loader";
15+
import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
1616
import { Command, CommandsSubgroup, CommandWithValidation } from "./types";
1717
import { areSortedArraysEqual, areUnsortedArraysEqual } from "../utils/arrays";
1818
import { parseIntOptional } from "../utils/numbers";
@@ -123,11 +123,11 @@ export function show(
123123
if (typeof overrideStringOrGroup === "string") {
124124
const exists = CommandlineLists.doesListExist(overrideStringOrGroup);
125125
if (exists) {
126-
Loader.show();
126+
showLoaderBar();
127127
subgroupOverride = await CommandlineLists.getList(
128128
overrideStringOrGroup,
129129
);
130-
Loader.hide();
130+
hideLoaderBar();
131131
} else {
132132
subgroupOverride = null;
133133
usingSingleList = Config.singleListCommandLine === "on";

‎frontend/src/ts/commandline/lists/quote-favorites.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import QuotesController, { Quote } from "../../controllers/quotes-controller";
33
import * as Notifications from "../../elements/notifications";
44
import { isAuthenticated } from "../../firebase";
55
import { createErrorMessage } from "../../utils/misc";
6-
import * as Loader from "../../elements/loader";
6+
import { showLoaderBar, hideLoaderBar } from "../../signals/loader-bar";
77
import * as TestWords from "../../test/test-words";
88
import { Command } from "../types";
99

@@ -23,15 +23,15 @@ const commands: Command[] = [
2323
},
2424
exec: async (): Promise<void> => {
2525
try {
26-
Loader.show();
26+
showLoaderBar();
2727
await QuotesController.setQuoteFavorite(
2828
TestWords.currentQuote as Quote,
2929
true,
3030
);
31-
Loader.hide();
31+
hideLoaderBar();
3232
Notifications.add("Quote added to favorites", 1);
3333
} catch (e) {
34-
Loader.hide();
34+
hideLoaderBar();
3535
const message = createErrorMessage(
3636
e,
3737
"Failed to add quote to favorites",
@@ -55,15 +55,15 @@ const commands: Command[] = [
5555
},
5656
exec: async (): Promise<void> => {
5757
try {
58-
Loader.show();
58+
showLoaderBar();
5959
await QuotesController.setQuoteFavorite(
6060
TestWords.currentQuote as Quote,
6161
false,
6262
);
63-
Loader.hide();
63+
hideLoaderBar();
6464
Notifications.add("Quote removed from favorites", 1);
6565
} catch (e) {
66-
Loader.hide();
66+
hideLoaderBar();
6767
const message = createErrorMessage(
6868
e,
6969
"Failed to remove quote from favorites",

‎frontend/src/ts/components/common/LoaderBar.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { JSX } from "solid-js";
2+
import { useRefWithUtils } from "../../hooks/useRefWithUtils";
3+
import { getLoaderBarSignal } from "../../signals/loader-bar";
4+
import { useVisibilityAnimation } from "../../hooks/useVisibilityAnimation";
5+
import { applyReducedMotion } from "../../utils/misc";
6+
7+
export function LoaderBar(): JSX.Element {
8+
const [ref, loaderEl] = useRefWithUtils<HTMLDivElement>();
9+
10+
useVisibilityAnimation({
11+
element: loaderEl,
12+
isVisible: () => getLoaderBarSignal()?.visible === true,
13+
showAnimationOptions: {
14+
delay: applyReducedMotion(getLoaderBarSignal()?.instant ? 0 : 125),
15+
},
16+
});
17+
18+
return <div id="backgroundLoader" class="hidden" ref={ref}></div>;
19+
}

‎frontend/src/ts/components/mount.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { render } from "solid-js/web";
22
import { qsa } from "../utils/dom";
3-
43
import { JSXElement } from "solid-js";
54
import { Footer } from "./layout/footer/Footer";
65
import { Modals } from "./modals/Modals";
76
import { AboutPage } from "./pages/AboutPage";
7+
import { LoaderBar } from "./common/LoaderBar";
88

99
const components: Record<string, () => JSXElement> = {
1010
Footer: () => <Footer />,
1111
Modals: () => <Modals />,
1212
AboutPage: () => <AboutPage />,
13+
LoaderBar: () => <LoaderBar />,
1314
};
1415

1516
function mountToMountpoint(name: string, component: () => JSXElement): void {

‎frontend/src/ts/controllers/challenge-controller.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import * as Funbox from "../test/funbox/funbox";
77
import Config, { setConfig } from "../config";
88
import * as ConfigEvent from "../observables/config-event";
99
import * as TestState from "../test/test-state";
10-
import * as Loader from "../elements/loader";
10+
11+
import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
1112
import { CustomTextLimitMode, CustomTextMode } from "@monkeytype/schemas/util";
1213
import {
1314
Config as ConfigType,
@@ -284,11 +285,11 @@ export async function setup(challengeName: string): Promise<boolean> {
284285
nosave: true,
285286
});
286287
} else if (challenge.type === "script") {
287-
Loader.show();
288+
showLoaderBar();
288289
const response = await fetch(
289290
"/challenges/" + (challenge.parameters[0] as string),
290291
);
291-
Loader.hide();
292+
hideLoaderBar();
292293
if (response.status !== 200) {
293294
throw new Error(`${response.status} ${response.statusText}`);
294295
}

‎frontend/src/ts/controllers/theme-controller.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import * as BackgroundFilter from "../elements/custom-background-filter";
88
import * as ConfigEvent from "../observables/config-event";
99
import * as DB from "../db";
1010
import * as Notifications from "../elements/notifications";
11-
import * as Loader from "../elements/loader";
11+
12+
import { showLoaderBar, hideLoaderBar } from "../signals/loader-bar";
1213
import { debounce } from "throttle-debounce";
1314
import { ThemeName } from "@monkeytype/schemas/configs";
1415
import { themes, ThemesList } from "../constants/themes";
@@ -93,7 +94,7 @@ export async function loadStyle(name: string): Promise<void> {
9394
console.debug("Theme controller loading style", name);
9495
loadStyleLoaderTimeouts.push(
9596
setTimeout(() => {
96-
Loader.show();
97+
showLoaderBar();
9798
}, 100),
9899
);
99100
qs("#nextTheme")?.remove();
@@ -104,7 +105,7 @@ export async function loadStyle(name: string): Promise<void> {
104105
link.id = "nextTheme";
105106
link.onload = (): void => {
106107
console.debug("Theme controller loaded style", name);
107-
Loader.hide();
108+
hideLoaderBar();
108109
swapCurrentToNext();
109110
loadStyleLoaderTimeouts.map((t) => clearTimeout(t));
110111
loadStyleLoaderTimeouts = [];
@@ -114,7 +115,7 @@ export async function loadStyle(name: string): Promise<void> {
114115
link.onerror = (e): void => {
115116
console.debug("Theme controller failed to load style", name, e);
116117
console.error(`Failed to load theme ${name}`, e);
117-
Loader.hide();
118+
hideLoaderBar();
118119
Notifications.add("Failed to load theme", 0);
119120
swapCurrentToNext();
120121
loadStyleLoaderTimeouts.map((t) => clearTimeout(t));

‎frontend/src/ts/db.ts‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ import {
99
TestActivityCalendar,
1010
ModifiableTestActivityCalendar,
1111
} from "./elements/test-activity-calendar";
12-
import * as Loader from "./elements/loader";
13-
12+
import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
1413
import { Badge, CustomTheme } from "@monkeytype/schemas/users";
1514
import { Config, Difficulty } from "@monkeytype/schemas/configs";
1615
import {
@@ -1110,11 +1109,11 @@ export async function getTestActivityCalendar(
11101109
return undefined;
11111110
}
11121111

1113-
Loader.show();
1112+
showLoaderBar();
11141113
const response = await Ape.users.getTestActivity();
11151114
if (response.status !== 200) {
11161115
Notifications.add("Error getting test activities", -1, { response });
1117-
Loader.hide();
1116+
hideLoaderBar();
11181117
return undefined;
11191118
}
11201119

@@ -1134,7 +1133,7 @@ export async function getTestActivityCalendar(
11341133
true,
11351134
);
11361135
}
1137-
Loader.hide();
1136+
hideLoaderBar();
11381137
}
11391138

11401139
return dbSnapshot.testActivityByYear[yearString];

0 commit comments

Comments
 (0)