Reduce reliance on setTimeout shenanigans

internal/assets/static/main.css

@@ -190,11 +190,6 @@
     background-color: var(--color-background);
 }
 
-/* required to prevent collapsed lazy images from being loaded while the container is being setup */
-.collapsible-container:not(.ready) img[loading=lazy] {
-    display: none;
-}
-
 ::selection {
     background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
     color: var(--color-text-highlight);
@@ -282,7 +277,6 @@ body {
     gap: var(--widget-gap);
     margin: var(--widget-gap) 0;
     animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
-    animation-delay: 3ms;
 }
 
 @keyframes pageColumnsEntrance {
@@ -1011,10 +1005,10 @@ body {
 
     .page-column {
         display: none;
-        animation: columnEntrance 0s cubic-bezier(0.25, 1, 0.5, 1) backwards;
+        animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards;
     }
 
-    .animate-element-transition .page-column {
+    .page-columns-transitioned .page-column {
         animation-duration: .3s;
     }
 

internal/assets/static/main.js

@@ -61,7 +61,7 @@ function setupCarousels() {
         itemsContainer.addEventListener("scroll", determineSideCutoffsRateLimited);
         document.addEventListener("resize", determineSideCutoffsRateLimited);
 
-        setTimeout(determineSideCutoffs, 1);
+        afterContentReady(determineSideCutoffs);
     }
 }
 
@@ -160,22 +160,22 @@ function setupLazyImages() {
         image.classList.add("finished-transition");
     }
 
-    setTimeout(() => {
+    afterContentReady(() => {
         for (let i = 0; i < images.length; i++) {
             const image = images[i];
 
             if (image.complete) {
                 image.classList.add("cached");
-                setTimeout(() => imageFinishedTransition(image), 5);
+                setTimeout(() => imageFinishedTransition(image), 1);
             } else {
                 // TODO: also handle error event
                 image.addEventListener("load", () => {
                     image.classList.add("loaded");
-                    setTimeout(() => imageFinishedTransition(image), 500);
+                    setTimeout(() => imageFinishedTransition(image), 400);
                 });
             }
         }
-    }, 5);
+    });
 }
 
 function attachExpandToggleButton(collapsibleContainer) {
@@ -314,11 +314,11 @@ function setupCollapsibleGrids() {
             }
         };
 
-        setTimeout(() => {
+        afterContentReady(() => {
             cardsPerRow = getCardsPerRow();
             resolveCollapsibleItems();
             gridElement.classList.add("ready");
-        }, 1);
+        });
 
         window.addEventListener("resize", () => {
             const newCardsPerRow = getCardsPerRow();
@@ -333,6 +333,12 @@ function setupCollapsibleGrids() {
     }
 }
 
+const contentReadyCallbacks = [];
+
+function afterContentReady(callback) {
+    contentReadyCallbacks.push(callback);
+}
+
 async function setupPage() {
     const pageElement = document.getElementById("page");
     const pageContentElement = document.getElementById("page-content");
@@ -340,10 +346,6 @@ async function setupPage() {
 
     pageContentElement.innerHTML = pageContent;
 
-    setTimeout(() => {
-        document.body.classList.add("animate-element-transition");
-    }, 200);
-
     try {
         setupLazyImages();
         setupCarousels();
@@ -352,6 +354,14 @@ async function setupPage() {
         setupDynamicRelativeTime();
     } finally {
         pageElement.classList.add("content-ready");
+
+        for (let i = 0; i < contentReadyCallbacks.length; i++) {
+            contentReadyCallbacks[i]();
+        }
+
+        setTimeout(() => {
+            document.body.classList.add("page-columns-transitioned");
+        }, 300);
     }
 }