From fa82c306f5322ac3f9019d761d0be12760026ede Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Sat, 13 Dec 2025 21:16:23 +0200
Subject: [PATCH] Remove jquery from loading page

---
 frontend/src/ts/pages/loading.ts | 41 ++++++++++++++++----------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontend/src/ts/pages/loading.ts b/frontend/src/ts/pages/loading.ts
index 4e7437fc5..78ec1929c 100644
--- a/frontend/src/ts/pages/loading.ts
+++ b/frontend/src/ts/pages/loading.ts
@@ -1,47 +1,46 @@
 import Page from "./page";
 import * as Skeleton from "../utils/skeleton";
-import { promiseAnimate } from "../utils/misc";
-import { qsr } from "../utils/dom";
+import { qs, qsr } from "../utils/dom";
 
-const pageEl = $(".page.pageLoading");
-const barEl = pageEl.find(".bar");
-const errorEl = pageEl.find(".error");
-const spinnerEl = pageEl.find(".spinner");
-const textEl = pageEl.find(".text");
+const pageEl = qs(".page.pageLoading");
+const barEl = pageEl?.qs(".bar");
+const errorEl = pageEl?.qs(".error");
+const spinnerEl = pageEl?.qs(".spinner");
+const textEl = pageEl?.qs(".text");
 
 export async function updateBar(
   percentage: number,
   duration: number,
 ): Promise<void> {
-  await promiseAnimate(barEl[0]?.querySelector(".fill") as HTMLElement, {
+  await barEl?.qs(".fill")?.promiseAnimate({
     width: percentage + "%",
     duration,
   });
 }
 
 export function updateText(text: string): void {
-  textEl.removeClass("hidden").html(text);
+  textEl?.show()?.setHtml(text);
 }
 
 export function showSpinner(): void {
-  barEl.addClass("hidden");
-  errorEl.addClass("hidden");
-  spinnerEl.removeClass("hidden");
-  textEl.addClass("hidden");
+  barEl?.hide();
+  errorEl?.hide();
+  spinnerEl?.show();
+  textEl?.hide();
 }
 
 export function showError(): void {
-  barEl.addClass("hidden");
-  spinnerEl.addClass("hidden");
-  errorEl.removeClass("hidden");
-  textEl.addClass("hidden");
+  barEl?.hide();
+  spinnerEl?.hide();
+  errorEl?.show();
+  textEl?.hide();
 }
 
 export async function showBar(): Promise<void> {
-  barEl.removeClass("hidden");
-  errorEl.addClass("hidden");
-  spinnerEl.addClass("hidden");
-  textEl.addClass("hidden");
+  barEl?.show();
+  errorEl?.hide();
+  spinnerEl?.show();
+  textEl?.hide();
 }
 
 export const page = new Page({