soft loader + preload script

app/plugins/page-ready.client.ts

@@ -0,0 +1,45 @@
+import blendSrc from '~/assets/images/blend.jpeg';
+
+const MAX_WAIT_MS = 2500;
+
+function sleep(ms: number) {
+    return new Promise<void>((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}
+
+function loadSrc(src: string) {
+    return new Promise<void>((resolve) => {
+        const img = new Image();
+        img.onload = () => resolve();
+        img.onerror = () => resolve();
+        img.src = src;
+    });
+}
+
+function settleImage(img: HTMLImageElement) {
+    if (img.complete) {
+        return img.decode?.().catch(() => undefined) ?? Promise.resolve();
+    }
+    return new Promise<void>((resolve) => {
+        img.addEventListener('load', () => resolve(), { once: true });
+        img.addEventListener('error', () => resolve(), { once: true });
+    });
+}
+
+async function whenReady() {
+    const tasks: Promise<unknown>[] = [loadSrc(blendSrc)];
+    if (document.fonts?.ready) tasks.push(document.fonts.ready);
+    for (const img of document.images) {
+        tasks.push(settleImage(img));
+    }
+    await Promise.race([Promise.all(tasks), sleep(MAX_WAIT_MS)]);
+    await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.hook('app:mounted', async () => {
+        await whenReady();
+        document.documentElement.classList.remove('is-loading');
+    });
+});