💫 [Page] Improve page loading

beefchimi · Jul 26, 2024 · cd8fa62 · cd8fa62
1 parent cc8bfc3
commit cd8fa62
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 46 deletions.
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -27,7 +27,7 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href;
 ---
 
 <!doctype html>
-<html lang="en" data-current-index="0">
+<html lang="en" data-current-index="0" data-ready="loading">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -131,23 +131,45 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href;
     display: flex;
     justify-content: center;
   }
+
+  /* --- Page load --- */
+
+  @keyframes pageLoadScreenCover {
+    from {
+      opacity: 1;
+      visibility: visible;
+    }
+    to {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  body {
+    position: relative;
+
+    &::after {
+      content: '';
+      z-index: var(--index-mesosphere);
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background-color: black;
+    }
+  }
+
+  html[data-ready='done'] body::after {
+    animation: pageLoadScreenCover var(--speed-slower) var(--ease) forwards;
+  }
 </style>
 
 <script>
+  import {PageLoad} from '@scripts/PageLoad';
   import {PwaServiceWorker} from '@scripts/PwaServiceWorker';
 
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', PwaServiceWorker.install);
   }
 
-  // TODO: Decide if we want to leverage `readystate` for our
-  // page load animation.
-
-  /*
-    document.onreadystatechange = () => {
-      if (document.readyState === "complete") {
-        initApplication();
-      }
-    };
-  */
+  PageLoad.schedule();
 </script>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -47,17 +47,23 @@ import Stars from '@components/Stars.astro';
     }
   }
 
-  .ErrorContent {
+  :global(#Main404) {
     --color-portfolio: hsl(var(--color-rainbow) 100% 50%);
+    animation: rainbowSpin 4s linear infinite both;
+  }
 
-    position: relative;
+  .ErrorContent {
     display: grid;
     justify-content: center;
     gap: var(--space-tight);
     padding: var(--space);
     text-align: center;
     max-width: 90rem;
-    animation: rainbowSpin 4s linear infinite both;
+
+    /* Page load (fade-in) */
+    position: relative;
+    z-index: var(--index-thermosphere);
+    animation: fadeIn var(--speed-slower) var(--speed-slow) var(--ease) both;
   }
 
   .ErrorContent h4 a {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,6 +4,7 @@ import Page from '@layouts/Page.astro';
 import {NAV_ID, NAV_TOGGLE_ID, OVERLAY_ID} from '@data/app';
 import {sections} from '@data/sections';
 
+import Contact from '@components/Contact.astro';
 import Hamburger from '@components/Hamburger.astro';
 import Navigation from '@components/Navigation.astro';
 import Project from '@components/Project.astro';
@@ -14,8 +15,9 @@ import ProjectOverlay from '@sections/ProjectOverlay.astro';
 const [intro, ...portfolioSections] = sections;
 ---
 
-<Page id="Home" title="Curtis Dulmage | UX Developer / Ottawa Canada">
+<Page id="PageHome" title="Curtis Dulmage | UX Developer / Ottawa Canada">
   <Navigation id={NAV_ID} items={sections}>
+    <Contact />
     <Hamburger id={NAV_TOGGLE_ID} controlsId={NAV_ID} />
   </Navigation>
 

diff --git a/src/scripts/PageLoad.ts b/src/scripts/PageLoad.ts
@@ -0,0 +1,40 @@
+export type HtmlReady = 'loading' | 'done' | 'error';
+
+export class PageLoad {
+  static MOTION_DELAY = 1200;
+
+  static documentState() {
+    return document.readyState;
+  }
+
+  static isHome() {
+    const {pathname} = window.location;
+    return pathname === '' || pathname === '/';
+  }
+
+  static isLoaded() {
+    return document.documentElement.dataset.ready === 'done';
+  }
+
+  static schedule() {
+    if (PageLoad.documentState() === 'complete') {
+      PageLoad.#updateDocument();
+      return;
+    }
+
+    document.addEventListener('readystatechange', PageLoad.#handleReadyState);
+  }
+
+  static #handleReadyState() {
+    window.scrollTo(0, 0);
+    window.setTimeout(PageLoad.#updateDocument, PageLoad.MOTION_DELAY);
+  }
+
+  static #updateDocument() {
+    document.documentElement.dataset.ready = 'done';
+    document.removeEventListener(
+      'readystatechange',
+      PageLoad.#handleReadyState,
+    );
+  }
+}
diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro
@@ -1,6 +1,5 @@
 ---
 import {type SectionEntry} from '@data/types';
-import Contact from '@components/Contact.astro';
 
 interface Props {
   id: SectionEntry['id'];
@@ -32,8 +31,6 @@ const {id, thumbnail} = Astro.props;
         <em>Please get in touch if you have any questions. Thank you.</em>
       </p>
     </div>
-
-    <Contact />
   </article>
 </header>
 
@@ -53,6 +50,11 @@ const {id, thumbnail} = Astro.props;
     @media (--min-tablet) {
       gap: var(--space);
     }
+
+    /* Page load (fade-in) */
+    position: relative;
+    z-index: var(--index-thermosphere);
+    animation: fadeIn var(--speed-slower) var(--speed-slow) var(--ease) both;
   }
 
   .Details {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -87,34 +87,6 @@ body {
   cursor: url('../assets/svg/cursors/CursorAuto.svg'), auto;
 }
 
-/* --- Page load --- */
-/* TODO: Consider something better with `document.readystate`. */
-
-@keyframes pageLoad {
-  from {
-    opacity: 1;
-    visibility: visible;
-  }
-  to {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-body {
-  position: relative;
-
-  &::after {
-    content: '';
-    z-index: var(--index-mesosphere);
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    background-color: black;
-    animation: pageLoad var(--speed-slow) var(--speed) var(--ease) forwards;
-  }
-}
-
 /* --- Smooth scroll + snapping --- */
 /* Disabled because it breaks "dynamic chrome" behaviour on iOS */
 
@@ -330,3 +302,14 @@ button {
   }
   */
 }
+
+/* --- Global animations --- */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}