1 files changed, 19 insertions, 23 deletions

diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index f65b1201d94..4c2a369226e 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -1,12 +1,13 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { isEmpty } from 'lodash';
+import { isEmpty, debounce } from 'lodash';
 import { Manager } from 'smooshpack';
 import { listen } from 'codesandbox-api';
 import { GlLoadingIcon } from '@gitlab/ui';
 import Navigator from './navigator.vue';
-import { packageJsonPath } from '../../constants';
+import { packageJsonPath, LIVE_PREVIEW_DEBOUNCE } from '../../constants';
 import { createPathWithExt } from '../../utils';
+import eventHub from '../../eventhub';
 
 export default {
   components: {
@@ -61,13 +62,10 @@ export default {
       };
     },
   },
-  watch: {
-    entries: {
-      deep: true,
-      handler: 'update',
-    },
-  },
   mounted() {
+    this.onFilesChangeCallback = debounce(() => this.update(), LIVE_PREVIEW_DEBOUNCE);
+    eventHub.$on('ide.files.change', this.onFilesChangeCallback);
+
     this.loading = true;
 
     return this.loadFileContent(packageJsonPath)
@@ -78,17 +76,19 @@ export default {
       .then(() => this.initPreview());
   },
   beforeDestroy() {
+    // Setting sandpackReady = false protects us form a phantom `update()` being called when `debounce` finishes.
+    this.sandpackReady = false;
+    eventHub.$off('ide.files.change', this.onFilesChangeCallback);
+
     if (!isEmpty(this.manager)) {
       this.manager.listener();
     }
+
     this.manager = {};
 
     if (this.listener) {
       this.listener();
     }
-
-    clearTimeout(this.timeout);
-    this.timeout = null;
   },
   methods: {
     ...mapActions(['getFileData', 'getRawFileData']),
@@ -108,7 +108,7 @@ export default {
         .then(() => {
           this.initManager();
 
-          this.listener = listen(e => {
+          this.listener = listen((e) => {
             switch (e.type) {
               case 'done':
                 this.sandpackReady = true;
@@ -122,25 +122,21 @@ export default {
     update() {
       if (!this.sandpackReady) return;
 
-      clearTimeout(this.timeout);
-
-      this.timeout = setTimeout(() => {
-        if (isEmpty(this.manager)) {
-          this.initPreview();
+      if (isEmpty(this.manager)) {
+        this.initPreview();
 
-          return;
-        }
+        return;
+      }
 
-        this.manager.updatePreview(this.sandboxOpts);
-      }, 250);
+      this.manager.updatePreview(this.sandboxOpts);
     },
     initManager() {
       const { codesandboxBundlerUrl: bundlerURL } = this;
 
       const settings = {
         fileResolver: {
-          isFile: p => Promise.resolve(Boolean(this.entries[createPathWithExt(p)])),
-          readFile: p => this.loadFileContent(createPathWithExt(p)).then(content => content),
+          isFile: (p) => Promise.resolve(Boolean(this.entries[createPathWithExt(p)])),
+          readFile: (p) => this.loadFileContent(createPathWithExt(p)).then((content) => content),
         },
         ...(bundlerURL ? { bundlerURL } : {}),
       };