impr(dom utils): rename ondocumentready, add onwindowload

!nuf

Author: Miodec

frontend/src/ts/controllers/ad-controller.ts

@@ -7,7 +7,7 @@ import Config from "../config";
 import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
 import * as PW from "./pw-ad-controller";
-import { onDocumentReady, qs } from "../utils/dom";
+import { onDOMReady, qs } from "../utils/dom";
 
 const breakpoint = 900;
 let widerThanBreakpoint = true;
@@ -317,7 +317,7 @@ BannerEvent.subscribe(() => {
   updateVerticalMargin();
 });
 
-onDocumentReady(() => {
+onDOMReady(() => {
   updateBreakpoint(true);
   updateBreakpoint2();
 });

frontend/src/ts/pages/account-settings.ts

@@ -12,7 +12,7 @@ import * as BlockedUserTable from "../elements/account-settings/blocked-user-tab
 import * as Notifications from "../elements/notifications";
 import { z } from "zod";
 import * as AuthEvent from "../observables/auth-event";
-import { qs, qsr, onDocumentReady } from "../utils/dom";
+import { qs, qsr, onWindowLoad } from "../utils/dom";
 
 const pageElement = qsr(".page.pageAccountSettings");
 
@@ -242,10 +242,6 @@ export const page = new PageWithUrlParams({
   },
 });
 
-onDocumentReady(() => {
-  setTimeout(() => {
-    //band aid fix for now, we need to delay saving the skeleton
-    // to allow the click listeners to be registered first
-    Skeleton.save("pageAccountSettings");
-  }, 0);
+onWindowLoad(() => {
+  Skeleton.save("pageAccountSettings");
 });

frontend/src/ts/ready.ts

@@ -10,9 +10,9 @@ import { getActiveFunboxesWithFunction } from "./test/funbox/list";
 import { configLoadPromise } from "./config";
 import { authPromise } from "./firebase";
 import { animate } from "animejs";
-import { onDocumentReady, qs } from "./utils/dom";
+import { onDOMReady, qs } from "./utils/dom";
 
-onDocumentReady(async () => {
+onDOMReady(async () => {
   await configLoadPromise;
   await authPromise;
 

frontend/src/ts/utils/dom.ts

@@ -52,17 +52,32 @@ export function qsr<T extends HTMLElement = HTMLElement>(
 }
 
 /**
- * Execute a callback function when the document is fully loaded.
+ * Execute a callback function when the DOM is fully loaded. If you need to wait
+ * for all resources (images, stylesheets, scripts, etc.) to load, use `onWindowLoad` instead.
  * If the document is already loaded, the callback is executed immediately.
  */
-export function onDocumentReady(callback: () => void): void {
+export function onDOMReady(callback: () => void): void {
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", callback);
   } else {
     callback();
   }
 }
 
+/**
+ * Execute a callback function when the window 'load' event fires, which occurs
+ * after the entire page (including all dependent resources such as images,
+ * stylesheets, and scripts) has fully loaded.
+ * If the window is already loaded, the callback is executed immediately.
+ */
+export function onWindowLoad(callback: () => void): void {
+  if (document.readyState === "complete") {
+    callback();
+  } else {
+    window.addEventListener("load", callback);
+  }
+}
+
 /**
  * Creates an ElementWithUtils wrapping a newly created element.
  * @param tagName The tag name of the element to create.