From 84b19edf0456800723903291400a4a8ec332a894 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Wed, 2 Oct 2024 01:09:49 -0300 Subject: [PATCH] Revisit the loader implementation --- src/html/_postman.html.erb | 2 +- src/html/main/surah-index.html.erb | 2 +- src/html/main/surah-stream.html.erb | 2 +- src/js/loaders/SurahIndexLoader.ts | 17 +++++++---------- src/js/loaders/SurahStreamLoader.ts | 19 ++++++++----------- 5 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/html/_postman.html.erb b/src/html/_postman.html.erb index 2958dac05..d5e0d083d 100644 --- a/src/html/_postman.html.erb +++ b/src/html/_postman.html.erb @@ -1,4 +1,4 @@ -
+
<%= t(locale, "loading") %> diff --git a/src/html/main/surah-index.html.erb b/src/html/main/surah-index.html.erb index f8b993c08..3e3a32ceb 100644 --- a/src/html/main/surah-index.html.erb +++ b/src/html/main/surah-index.html.erb @@ -21,7 +21,7 @@ <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %> -
+
diff --git a/src/html/main/surah-stream.html.erb b/src/html/main/surah-stream.html.erb index c53293dd3..c0a861cab 100644 --- a/src/html/main/surah-stream.html.erb +++ b/src/html/main/surah-stream.html.erb @@ -21,7 +21,7 @@ <%= erb("_postman.html.erb", {locale: context.locale, dir: context.dir}) %> -
diff --git a/src/js/loaders/SurahIndexLoader.ts b/src/js/loaders/SurahIndexLoader.ts index 74d32429a..0b686623f 100644 --- a/src/js/loaders/SurahIndexLoader.ts +++ b/src/js/loaders/SurahIndexLoader.ts @@ -3,10 +3,8 @@ import { formatNumber } from "~/lib/t"; (function () { const docel = document.documentElement; - const loader: HTMLElement = docel.querySelector(".postman.loader")!; - const style: HTMLStyleElement = docel.querySelector(".css.postman")!; - const progressBar: HTMLProgressElement = loader.querySelector("progress")!; - const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!; + const main: HTMLElement = docel.querySelector(".postman.main")!; + const css: HTMLStyleElement = docel.querySelector(".postman.css")!; const rev = docel .querySelector("meta[name='revision']")! .getAttribute("content")!; @@ -26,16 +24,15 @@ import { formatNumber } from "~/lib/t"; item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }), ...fonts, item.progress((percent: number) => { - progressBar.value = percent; - progressNumber.innerText = formatNumber( - docel.lang, - Number(percent.toFixed(0)), - ); + const bar: HTMLProgressElement = main.querySelector("progress")!; + const num: HTMLSpanElement = main.querySelector(".percentage")!; + bar.value = percent; + num.innerText = formatNumber(docel.lang, Number(percent.toFixed(0))); }), ) .fetch() .then((pkg) => { - [loader, style].forEach((el) => el.remove()); + [main, css].forEach((el) => el.remove()); pkg.fonts.forEach((f) => document.fonts.add(f)); pkg.css.forEach((s) => document.head.appendChild(s)); pkg.scripts diff --git a/src/js/loaders/SurahStreamLoader.ts b/src/js/loaders/SurahStreamLoader.ts index ad4e20c61..bb7c7fd0e 100644 --- a/src/js/loaders/SurahStreamLoader.ts +++ b/src/js/loaders/SurahStreamLoader.ts @@ -3,11 +3,9 @@ import { formatNumber } from "~/lib/t"; (function () { const docel = document.documentElement; - const loader = docel.querySelector(".postman.loader")!; - const style = docel.querySelector(".css.postman")!; - const progressBar = loader.querySelector("progress")!; - const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!; - const { surahId } = document.querySelector(".root")!.dataset; + const main = docel.querySelector(".postman.main")!; + const css = docel.querySelector(".postman.css")!; + const { surahId } = docel.querySelector(".app.mount")!.dataset; const rev = docel .querySelector("meta[name='revision']")! .getAttribute("content")!; @@ -33,16 +31,15 @@ import { formatNumber } from "~/lib/t"; item.json(`/json/durations/${surahId}.json?v=${rev}`, { className: "json durations" }), /* eslint-enable */ item.progress((percent: number) => { - progressBar.value = percent; - progressNumber.innerText = formatNumber( - docel.lang, - Number(percent.toFixed(0)), - ); + const bar = main.querySelector("progress")!; + const num: HTMLSpanElement = main.querySelector(".percentage")!; + bar.value = percent; + num.innerText = formatNumber(docel.lang, Number(percent.toFixed(0))); }), ) .fetch() .then((pkg) => { - [loader, style].forEach((el) => el.remove()); + [main, css].forEach((el) => el.remove()); pkg.fonts.forEach((f) => document.fonts.add(f)); pkg.css.forEach((s) => document.head.appendChild(s)); pkg.json.forEach((o) => document.body.appendChild(o));