Improve page load/unload experience (remove FOUCs)

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,11 +77,17 @@ export default {
 
   mounted() {
     const editor = ace.edit(this.$refs.editor, {
-      theme: `ace/theme/${this.defineTheme()}`,
       mode: `ace/mode/${this.lang}`,
       ...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;
+      });
+    });
+
     if (this.value) editor.setValue(this.value, 1);
 
     this.editor = editor;
@@ -83,9 +111,8 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  destroyed() {
     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,
@@ -167,7 +195,6 @@ export default {
 
   beforeDestroy() {
     this.editor.destroy();
-    this.editor.container.remove();
   }
 };
 </script>