Remove rogue async breaking my loading screen

index.html

@@ -50,74 +50,78 @@
       <nav id="tab-list"></nav>
       <section id="tabs">
         <div class="page center" id="Welcome" data-tab="$Welcome">
-          <header>
-            <img class="icon" src="assets/images/outline.svg" />
-            <img class="type" src="assets/images/type.svg" />
-          </header>
-          <div class="maxw">
-            <p>
-              This handbook is a collection of tweaks of the /tg/station wiki
-              pages to make them prettier and easier to navigate.
-            </p>
-            <p>Please note that:</p>
-            <ul>
-              <li>
-                It's being built with smaller windows in mind (think SS13
-                popups), large window format is planned but it's just not there
-                yet.
-              </li>
-              <li>
-                There is a lot of development still happening, so many parts are
-                not as polished as they should be.
-              </li>
-            </ul>
-            <p>
-              Click any guide in the top menu to open it or
-              <a href="#" id="welcome_expand">click here</a> to learn about some
-              of the extra features packed in.
-            </p>
-          </div>
-          <div class="features">
-            <h2>
-              Extra Features
-            </h2>
+          <div class="wrapper">
+            <header>
+              <img class="icon" src="assets/images/outline.svg" />
+              <img class="type" src="assets/images/type.svg" />
+            </header>
             <div class="maxw">
-              <h3 class="nobg">Jump to section/item</h3>
               <p>
-                Press <b>SHIFT+S</b> on any page (except this one) to open up a
-                quick search menu.
+                This handbook is a collection of tweaks of the /tg/station wiki
+                pages to make them prettier and easier to navigate.
               </p>
+              <p>Please note that:</p>
+              <ul>
+                <li>
+                  It's being built with smaller windows in mind (think SS13
+                  popups), large window format is planned but it's just not
+                  there yet.
+                </li>
+                <li>
+                  There is a lot of development still happening, so many parts
+                  are not as polished as they should be.
+                </li>
+              </ul>
               <p>
-                Results for most pages are section titles, but some pages like
-                Chemistry have support for searching recipes etc.
+                Click any guide in the top menu to open it or
+                <a href="#" id="welcome_expand">click here</a> to learn about
+                some of the extra features packed in.
               </p>
-              <div class="images">
-                <img
-                  src="assets/images/welcome/bs-local.png"
-                  style="width: 40%;"
-                  loading="lazy"
-                />
-                <img
-                  src="assets/images/welcome/bs-global.png"
-                  style="width: 40%;"
-                  loading="lazy"
-                />
+            </div>
+            <div class="features">
+              <h2>
+                Extra Features
+              </h2>
+              <div class="maxw">
+                <h3 class="nobg">Jump to section/item</h3>
+                <p>
+                  Press <b>SHIFT+S</b> on any page (except this one) to open up
+                  a quick search menu.
+                </p>
+                <p>
+                  Results for most pages are section titles, but some pages like
+                  Chemistry have support for searching recipes etc.
+                </p>
+                <div class="images">
+                  <img
+                    src="assets/images/welcome/bs-local.png"
+                    style="width: 40%;"
+                    loading="lazy"
+                  />
+                  <img
+                    src="assets/images/welcome/bs-global.png"
+                    style="width: 40%;"
+                    loading="lazy"
+                  />
+                </div>
+                <p>
+                  By default, only results for the current page are shown, you
+                  can use <code>@</code> as prefix to search in all guides at
+                  once.
+                </p>
+                <h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3>
+                <p>
+                  Recipes for reagent ingredients are now always shown in each
+                  recipe rather than being tooltips.
+                </p>
+                <h3 class="nobg">(Chemistry) Beaker sizing</h3>
+                <p>
+                  Press <b>SHIFT+B</b> to set your target reagent output and the
+                  inputs will change from "part" to "ml". This is currently
+                  quite inaccurate, use it as a guideline but apply common
+                  sense.
+                </p>
               </div>
-              <p>
-                By default, only results for the current page are shown, you can
-                use <code>@</code> as prefix to search in all guides at once.
-              </p>
-              <h3 class="nobg">(Chemistry) Auto-Expanded tooltips</h3>
-              <p>
-                Recipes for reagent ingredients are now always shown in each
-                recipe rather than being tooltips.
-              </p>
-              <h3 class="nobg">(Chemistry) Beaker sizing</h3>
-              <p>
-                Press <b>SHIFT+B</b> to set your target reagent output and the
-                inputs will change from "part" to "ml". This is currently quite
-                inaccurate, use it as a guideline but apply common sense.
-              </p>
             </div>
           </div>
         </div>

src/index.ts

@@ -35,7 +35,7 @@ async function load() {
   );
   spinnerContainer.appendChild(icons);
 
-  const promises = sections.flatMap(async (section) => {
+  const promises = sections.flatMap((section) => {
     manager.createSection(section.name);
 
     return section.tabs.map(async (tab) => {
@@ -60,7 +60,6 @@ async function load() {
   Promise.all(promises).then(() => {
     // Remove app-wide loading
     manager.setLoading(false);
-
     welcome.classList.add("active");
   });
 }

src/ui/TabManager.ts

@@ -31,6 +31,9 @@ async function loadPage(
   let html: string | null = null;
   const key = `page:${page}`;
 
+  const wrapper = document.createElement("div");
+  wrapper.className = "wrapper";
+
   // Check cache for pre-processed page
   if (useCache) {
     try {
@@ -73,30 +76,27 @@ async function loadPage(
     await nextAnimationFrame();
 
     // Set as HTML content and run HTML manipulations on it
-    const div = elem.cloneNode(false) as HTMLDivElement;
-    div.innerHTML = html;
+    wrapper.innerHTML = html;
 
     console.log(`${page}: processing`);
-    processHTML(div, page);
+    processHTML(wrapper, page);
 
     // Get version to set
     const version =
       page in PAGE_VERSIONS ? PAGE_VERSIONS[page] : PAGE_VERSIONS.$DEFAULT;
 
     // Save result to cache
-    cache.set(key, div.innerHTML, version).then(() => {
+    cache.set(key, wrapper.innerHTML, version).then(() => {
       console.log(`${page}: saved to cache`);
     });
-
-    elem.replaceWith(div);
-    elem = div;
   } else {
     // Set cached content as HTML
-    elem.innerHTML = html;
+    wrapper.innerHTML = html;
 
     postProcessHTML(elem, page); // noop in prod, used in dev for testing candidate DOM changes
   }
 
+  elem.innerHTML = wrapper.outerHTML;
   bindFunctions(elem, page);
   elem.classList.remove("waiting");
 

style/pages/global.scss

@@ -34,9 +34,6 @@ $max-width: 960px;
 }
 
 .page {
-  max-width: $max-width;
-  margin: 0 auto;
-
   h1.pageheader {
     margin-top: 0;
     padding: 15pt 10pt;
@@ -78,3 +75,8 @@ $max-width: 960px;
     align-items: center;
   }
 }
+
+.wrapper {
+  margin: 0 auto;
+  max-width: $max-width;
+}

style/ui.scss

@@ -1,215 +1,225 @@
 html,
 body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    overflow: hidden;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
 }
 
 .bgimage {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 0;
-    img {
-        opacity: 0.4;
-        width: 80vmin;
-    }
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 0;
+  img {
+    opacity: 0.4;
+    width: 80vmin;
+  }
 }
 
 body {
-    background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%));
-    background-size: 100% 100%;
-    background-attachment: fixed;
-    color: #fff;
-    font-family: "Iosevka Aile Web", sans-serif;
-    font-size: 9pt;
-    line-height: 1.6em;
+  background: linear-gradient(
+    to bottom,
+    darken($nanotrasen, 20%),
+    darken($nanotrasen, 10%)
+  );
+  background-size: 100% 100%;
+  background-attachment: fixed;
+  color: #fff;
+  font-family: "Iosevka Aile Web", sans-serif;
+  font-size: 9pt;
+  line-height: 1.6em;
 }
 
 #app {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 
-    &.waiting {
-        #tab-list,
-        #section-list {
-            display: none;
-        }
+  &.waiting {
+    #tab-list,
+    #section-list {
+      display: none;
     }
+  }
 }
 
 ::-webkit-scrollbar {
-    width: 14pt;
+  width: 14pt;
 }
 
 ::-webkit-scrollbar-track {
-    background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%));
-    border: 1px solid lighten($nanotrasen, 10%);
+  background: linear-gradient(
+    to bottom,
+    darken($nanotrasen, 0%),
+    darken($nanotrasen, 10%),
+    darken($nanotrasen, 0%)
+  );
+  border: 1px solid lighten($nanotrasen, 10%);
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    background: linear-gradient(
-        to bottom,
-        lighten($nanotrasen, 20%),
-        lighten($nanotrasen, 30%),
-        lighten($nanotrasen, 20%)
-    );
-    border: 1px solid lighten($nanotrasen, 10%);
+  border-radius: 2px;
+  background: linear-gradient(
+    to bottom,
+    lighten($nanotrasen, 20%),
+    lighten($nanotrasen, 30%),
+    lighten($nanotrasen, 20%)
+  );
+  border: 1px solid lighten($nanotrasen, 10%);
 }
 
 .speen {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 12pt;
-    img {
-        width: 60vmin;
-        max-height: 100%;
-        opacity: 0.9;
-        padding-bottom: 1em;
-    }
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 12pt;
+  img {
+    width: 60vmin;
+    max-height: 100%;
+    opacity: 0.9;
+    padding-bottom: 1em;
+  }
 }
 
 #tabs {
-    flex: 1;
-    z-index: 1;
-    display: grid;
-    overflow: auto;
-    .page {
-        //visibility: hidden;
-        will-change: display;
-        &:not(.active) {
-            display: none;
-        }
-        grid-row: 1;
-        grid-column: 1;
-        &.active {
-            //visibility: visible;
-            &.waiting {
-                user-select: none;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100vw;
-                height: 100vh;
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-            }
-        }
+  flex: 1;
+  z-index: 1;
+  display: grid;
+  overflow: hidden;
+  .page {
+    //visibility: hidden;
+    will-change: display;
+    &:not(.active) {
+      display: none;
     }
+    overflow: auto;
+    grid-row: 1;
+    grid-column: 1;
+    &.active {
+      //visibility: visible;
+      &.waiting {
+        user-select: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+    }
+  }
 }
 
 $section-active: darken($nanotrasen, 5%);
 $tab-active: lighten($nanotrasen, 10%);
 
 #section-list {
-    z-index: 2;
-    border-bottom: 2px solid $section-active;
-    display: flex;
-    .section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        user-select: none;
-        font-size: 9pt;
-        padding: 3pt 7pt;
-        text-transform: uppercase;
-        color: lighten($nanotrasen, 60%);
-        flex: 1;
-        &.active {
-            background-color: $section-active;
-            color: white;
-        }
-        &:not(.active) {
-            cursor: pointer;
-            &:hover {
-                background-color: darken($section-active, 10%);
-            }
-        }
-    }
-}
-
-#tab-list {
-    z-index: 2;
-    display: flex;
-    background-color: $section-active;
-    border-bottom: 4px solid $tab-active;
-
-    .tab {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        user-select: none;
-        font-size: 7pt;
-        padding: 2px 4px;
-        padding-bottom: 0;
-        text-transform: uppercase;
-        flex: 1;
-        max-width: 100px;
-
-        img {
-            height: 80%;
-            max-height: 24px;
-            margin: 0;
-        }
-        &.active {
-            background-color: $tab-active;
-        }
-        &:not(.active) {
-            cursor: pointer;
-            &:hover {
-                background-color: darken($tab-active, 8%);
-            }
-        }
-
-        &.hidden {
-            display: none;
-        }
-    }
-}
-
-noscript {
-    position: fixed;
-    top: 0;
+  z-index: 2;
+  border-bottom: 2px solid $section-active;
+  display: flex;
+  .section {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: transparent;
-    width: 100%;
-}
-
-.loading-icons {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
     user-select: none;
     font-size: 9pt;
     padding: 3pt 7pt;
     text-transform: uppercase;
-    flex-wrap: wrap;
-    div {
-        border: 1px solid red;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+    color: lighten($nanotrasen, 60%);
+    flex: 1;
+    &.active {
+      background-color: $section-active;
+      color: white;
     }
-    img {
-        max-width: 32px;
+    &:not(.active) {
+      cursor: pointer;
+      &:hover {
+        background-color: darken($section-active, 10%);
+      }
     }
+  }
+}
+
+#tab-list {
+  z-index: 2;
+  display: flex;
+  background-color: $section-active;
+  border-bottom: 4px solid $tab-active;
+
+  .tab {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    font-size: 7pt;
+    padding: 2px 4px;
+    padding-bottom: 0;
+    text-transform: uppercase;
+    flex: 1;
+    max-width: 100px;
+
+    img {
+      height: 80%;
+      max-height: 24px;
+      margin: 0;
+    }
+    &.active {
+      background-color: $tab-active;
+    }
+    &:not(.active) {
+      cursor: pointer;
+      &:hover {
+        background-color: darken($tab-active, 8%);
+      }
+    }
+
+    &.hidden {
+      display: none;
+    }
+  }
+}
+
+noscript {
+  position: fixed;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  width: 100%;
+}
+
+.loading-icons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  font-size: 9pt;
+  padding: 3pt 7pt;
+  text-transform: uppercase;
+  flex-wrap: wrap;
+  div {
+    border: 1px solid red;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  img {
+    max-width: 32px;
+  }
 }