Use rAF to make the loading less stuttery

assets/fonts/iosevka/iosevka-aile.css

@@ -1,3 +1,4 @@
+/*
 
 @font-face {
 	font-family: 'Iosevka Aile Web';
@@ -68,77 +69,93 @@
 	font-style: italic;
 	src: url('woff2/iosevka-aile-extralightitalic.woff2') format('woff2'), url('woff/iosevka-aile-extralightitalic.woff') format('woff'), url('ttf/iosevka-aile-extralightitalic.ttf') format('truetype');
 }
-
+*/
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 300;
   font-stretch: normal;
   font-style: normal;
-	src: url('woff2/iosevka-aile-light.woff2') format('woff2'), url('woff/iosevka-aile-light.woff') format('woff'), url('ttf/iosevka-aile-light.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-light.woff2") format("woff2"),
+    url("woff/iosevka-aile-light.woff") format("woff"),
+    url("ttf/iosevka-aile-light.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 300;
   font-stretch: normal;
   font-style: oblique;
-	src: url('woff2/iosevka-aile-lightoblique.woff2') format('woff2'), url('woff/iosevka-aile-lightoblique.woff') format('woff'), url('ttf/iosevka-aile-lightoblique.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-lightoblique.woff2") format("woff2"),
+    url("woff/iosevka-aile-lightoblique.woff") format("woff"),
+    url("ttf/iosevka-aile-lightoblique.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web Oblique';
+  font-family: "Iosevka Aile Web Oblique";
   font-display: swap;
   font-weight: 300;
   font-stretch: normal;
-	src: url('woff2/iosevka-aile-lightoblique.woff2') format('woff2'), url('woff/iosevka-aile-lightoblique.woff') format('woff'), url('ttf/iosevka-aile-lightoblique.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-lightoblique.woff2") format("woff2"),
+    url("woff/iosevka-aile-lightoblique.woff") format("woff"),
+    url("ttf/iosevka-aile-lightoblique.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 300;
   font-stretch: normal;
   font-style: italic;
-	src: url('woff2/iosevka-aile-lightitalic.woff2') format('woff2'), url('woff/iosevka-aile-lightitalic.woff') format('woff'), url('ttf/iosevka-aile-lightitalic.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-lightitalic.woff2") format("woff2"),
+    url("woff/iosevka-aile-lightitalic.woff") format("woff"),
+    url("ttf/iosevka-aile-lightitalic.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 400;
   font-stretch: normal;
   font-style: normal;
-	src: url('woff2/iosevka-aile-regular.woff2') format('woff2'), url('woff/iosevka-aile-regular.woff') format('woff'), url('ttf/iosevka-aile-regular.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-regular.woff2") format("woff2"),
+    url("woff/iosevka-aile-regular.woff") format("woff"),
+    url("ttf/iosevka-aile-regular.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 400;
   font-stretch: normal;
   font-style: oblique;
-	src: url('woff2/iosevka-aile-oblique.woff2') format('woff2'), url('woff/iosevka-aile-oblique.woff') format('woff'), url('ttf/iosevka-aile-oblique.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-oblique.woff2") format("woff2"),
+    url("woff/iosevka-aile-oblique.woff") format("woff"),
+    url("ttf/iosevka-aile-oblique.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web Oblique';
+  font-family: "Iosevka Aile Web Oblique";
   font-display: swap;
   font-weight: 400;
   font-stretch: normal;
-	src: url('woff2/iosevka-aile-oblique.woff2') format('woff2'), url('woff/iosevka-aile-oblique.woff') format('woff'), url('ttf/iosevka-aile-oblique.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-oblique.woff2") format("woff2"),
+    url("woff/iosevka-aile-oblique.woff") format("woff"),
+    url("ttf/iosevka-aile-oblique.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 400;
   font-stretch: normal;
   font-style: italic;
-	src: url('woff2/iosevka-aile-italic.woff2') format('woff2'), url('woff/iosevka-aile-italic.woff') format('woff'), url('ttf/iosevka-aile-italic.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-italic.woff2") format("woff2"),
+    url("woff/iosevka-aile-italic.woff") format("woff"),
+    url("ttf/iosevka-aile-italic.ttf") format("truetype");
 }
-
+/*
 @font-face {
 	font-family: 'Iosevka Aile Web';
 	font-display: swap;
@@ -208,42 +225,50 @@
 	font-style: italic;
 	src: url('woff2/iosevka-aile-semibolditalic.woff2') format('woff2'), url('woff/iosevka-aile-semibolditalic.woff') format('woff'), url('ttf/iosevka-aile-semibolditalic.ttf') format('truetype');
 }
-
+*/
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 700;
   font-stretch: normal;
   font-style: normal;
-	src: url('woff2/iosevka-aile-bold.woff2') format('woff2'), url('woff/iosevka-aile-bold.woff') format('woff'), url('ttf/iosevka-aile-bold.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-bold.woff2") format("woff2"),
+    url("woff/iosevka-aile-bold.woff") format("woff"),
+    url("ttf/iosevka-aile-bold.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 700;
   font-stretch: normal;
   font-style: oblique;
-	src: url('woff2/iosevka-aile-boldoblique.woff2') format('woff2'), url('woff/iosevka-aile-boldoblique.woff') format('woff'), url('ttf/iosevka-aile-boldoblique.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-boldoblique.woff2") format("woff2"),
+    url("woff/iosevka-aile-boldoblique.woff") format("woff"),
+    url("ttf/iosevka-aile-boldoblique.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web Oblique';
+  font-family: "Iosevka Aile Web Oblique";
   font-display: swap;
   font-weight: 700;
   font-stretch: normal;
-	src: url('woff2/iosevka-aile-boldoblique.woff2') format('woff2'), url('woff/iosevka-aile-boldoblique.woff') format('woff'), url('ttf/iosevka-aile-boldoblique.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-boldoblique.woff2") format("woff2"),
+    url("woff/iosevka-aile-boldoblique.woff") format("woff"),
+    url("ttf/iosevka-aile-boldoblique.ttf") format("truetype");
 }
 
 @font-face {
-	font-family: 'Iosevka Aile Web';
+  font-family: "Iosevka Aile Web";
   font-display: swap;
   font-weight: 700;
   font-stretch: normal;
   font-style: italic;
-	src: url('woff2/iosevka-aile-bolditalic.woff2') format('woff2'), url('woff/iosevka-aile-bolditalic.woff') format('woff'), url('ttf/iosevka-aile-bolditalic.ttf') format('truetype');
+  src: url("woff2/iosevka-aile-bolditalic.woff2") format("woff2"),
+    url("woff/iosevka-aile-bolditalic.woff") format("woff"),
+    url("ttf/iosevka-aile-bolditalic.ttf") format("truetype");
 }
-
+/*
 @font-face {
 	font-family: 'Iosevka Aile Web';
 	font-display: swap;
@@ -313,3 +338,5 @@
 	font-style: italic;
 	src: url('woff2/iosevka-aile-heavyitalic.woff2') format('woff2'), url('woff/iosevka-aile-heavyitalic.woff') format('woff'), url('ttf/iosevka-aile-heavyitalic.ttf') format('truetype');
 }
+
+*/

lib/TabManager.ts

@@ -18,15 +18,21 @@ function initWaiting(elem: HTMLElement) {
 }
 
 async function loadPage(page: string, elem: HTMLElement) {
+  // Fetch page content
   console.log(page + ": fetching");
   let html = await getPageHTML(page);
+
   // Convert relative links to absolute
   html = html.replace(/"\/wiki/gi, '"//tgstation13.org/wiki');
+
+  // Set as HTML content and run HTML manipulations on it
+  requestAnimationFrame(() => {
     elem.innerHTML = html;
     console.log(page + ": processing");
     userscript(elem, page);
     console.log(page + ": userscript applied");
     elem.classList.remove("waiting");
+  });
 }
 
 type TabElements = { tabListItem: HTMLElement; tabContentItem: HTMLElement };

lib/userscript.ts

@@ -503,7 +503,6 @@ export default function (root: HTMLElement, docname: string) {
     );
   }
 
-  window.requestAnimationFrame(() => {
   switch (docname) {
     case "Guide_to_chemistry":
       betterChemistry();
@@ -514,5 +513,4 @@ export default function (root: HTMLElement, docname: string) {
   }
   // Everything is loaded, remove loading bar
   statusMessage.innerHTML = "";
-  });
 }