Improve page load/unload experience (remove FOUCs)

assets/css/fonts.scss

@@ -6,7 +6,9 @@
   font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  // Do not use font-display: swap for the icon font - it looks really bad when the page
+  // loads.
+  font-display: block;
   src: url("~static/fonts/material-icons-v48.woff2") format("woff2");
 }
 

assets/css/styles.scss

@@ -190,6 +190,7 @@ nav.primary-nav {
     color: var(--fg-light-color);
     fill: var(--fg-light-color);
     margin: 8px 0;
+    height: 52px;
 
     &:hover {
       color: var(--fg-color);

components/ace-editor.vue

@@ -1,7 +1,23 @@
 <template>
-  <pre ref="editor"></pre>
+  <div class="show-if-initialized" :class="{ initialized }">
+    <pre ref="editor"></pre>
+  </div>
 </template>
 
+<style lang="scss">
+  .show-if-initialized {
+    opacity: 0;
+
+    &.initialized {
+      opacity: 1;
+    }
+
+    & > * {
+      transition: none;
+    }
+  }
+</style>
+
 <script>
 const DEFAULT_THEME = "twilight"
 
@@ -30,6 +46,7 @@ export default {
 
   data() {
     return {
+      initialized: false,
       editor: null,
       cacheValue: "",
     }
@@ -43,7 +60,12 @@ export default {
       }
     },
     theme() {
-      this.editor.setTheme("ace/theme/" + this.defineTheme())
+      this.initialized = false;
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true;
+        });
+      });
     },
     lang(value) {
       this.editor.getSession().setMode("ace/mode/" + value)
@@ -55,12 +77,11 @@ export default {
 
   mounted() {
     const editor = ace.edit(this.$refs.editor, {
-      theme: `ace/theme/${this.defineTheme()}`,
       mode: `ace/mode/${this.lang}`,
       ...this.options,
     })
 
-    if (this.value) editor.setValue(this.value, 1)
+    if (this.value) editor.setValue(this.value, 1);
 
     this.editor = editor
     this.cacheValue = this.value
@@ -82,8 +103,8 @@ export default {
   },
 
   beforeDestroy() {
-    this.editor.destroy()
-    this.editor.container.remove()
-  },
-}
+    this.editor.destroy();
+    this.editor.container.remove();
+  }
+};
 </script>

components/graphql/queryeditor.vue

@@ -1,7 +1,23 @@
 <template>
-  <pre ref="editor"></pre>
+  <div class="show-if-initialized" :class="{ initialized }">
+    <pre ref="editor"></pre>
+  </div>
 </template>
 
+<style lang="scss">
+  .show-if-initialized {
+    opacity: 0;
+
+    &.initialized {
+      opacity: 1;
+    }
+
+    & > * {
+      transition: none;
+    }
+  }
+</style>
+
 <script>
 const DEFAULT_THEME = "twilight"
 
@@ -34,6 +50,7 @@ export default {
 
   data() {
     return {
+      initialized: false,
       editor: null,
       cacheValue: "",
       validationSchema: null,
@@ -48,7 +65,12 @@ export default {
       }
     },
     theme() {
-      this.editor.setTheme(`ace/theme/${this.defineTheme()}`)
+      this.initialized = false;
+      this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+        this.$nextTick().then(() => {
+          this.initialized = true;
+        });
+      });
     },
     lang(value) {
       this.editor.getSession().setMode(`ace/mode/${value}`)
@@ -62,13 +84,19 @@ export default {
     let langTools = ace.require("ace/ext/language_tools")
 
     const editor = ace.edit(this.$refs.editor, {
-      theme: `ace/theme/${this.defineTheme()}`,
       mode: `ace/mode/${this.lang}`,
       enableBasicAutocompletion: true,
       enableLiveAutocompletion: true,
       ...this.options,
     })
 
+    // Set the theme and show the editor only after it's been set to prevent FOUC.
+    editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
+      this.$nextTick().then(() => {
+        this.initialized = true;
+      });
+    });
+
     const completer = {
       getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
         if (this.validationSchema) {
@@ -155,8 +183,7 @@ export default {
   },
 
   beforeDestroy() {
-    this.editor.destroy()
-    this.editor.container.remove()
-  },
-}
+    this.editor.destroy();
+  }
+};
 </script>

layouts/default.vue

@@ -298,8 +298,8 @@
                 >
                   <i class="material-icons">offline_bolt</i>
                 </button>
-                <login v-if="!fb.currentUser" />
-                <span v-if="fb.currentUser">
+                <login v-if="fb.currentUser === null" />
+                <span v-else>
                   <v-popover>
                     <button
                       class="icon"