diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 7a2e92f6246..b75f8ab5fb1 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -36,7 +36,7 @@ export default {
       this.editor.updateDimensions();
     },
     viewer() {
-      // this.createEditorInstance();
+      this.createEditorInstance();
     },
   },
   beforeDestroy() {
diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index 12f1389f559..9a0baffceee 100644
--- a/app/assets/javascripts/ide/lib/common/model_manager.js
+++ b/app/assets/javascripts/ide/lib/common/model_manager.js
@@ -23,7 +23,7 @@ export default class ModelManager {
     }
 
     const model = new Model(this.monaco, file);
-    this.models.set(model.key, model);
+    this.models.set(model.path, model);
     this.disposable.add(model);
 
     eventHub.$on(
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index 0447a1d13f8..5408cb97199 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -44,7 +44,7 @@ export default class DirtyDiffController {
 
   computeDiff(model) {
     this.dirtyDiffWorker.postMessage({
-      key: model.key,
+      key: model.path,
       originalContent: model.getOriginalModel().getValue(),
       newContent: model.getModel().getValue(),
     });
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 8c41782cfb2..9293c945efa 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -8,29 +8,29 @@ import { setPageTitle } from '../utils';
 
 export const closeFile = ({ commit, state, getters, dispatch }, file) => {
   const path = file.path;
+  const indexOfClosedFile = getters.tabs.findIndex(f => f.key === file.key);
+  const fileWasActive = file.active;
 
   if (file.pending) {
     commit(types.REMOVE_PENDING_TAB, file);
   } else {
-    const indexOfClosedFile = getters.tabs.findIndex(f => f.path === path);
-    const fileWasActive = file.active;
-
     commit(types.TOGGLE_FILE_OPEN, path);
     commit(types.SET_FILE_ACTIVE, { path, active: false });
+  }
 
-    if (getters.tabs.length > 0 && fileWasActive) {
-      const nextIndexToOpen =
-        indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-      const nextFileToOpen = getters.tabs[nextIndexToOpen];
+  if (getters.tabs.length > 0 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+    const nextFileToOpen = getters.tabs[nextIndexToOpen];
 
-      if (nextFileToOpen.pending) {
-        dispatch('openPendingTab', nextFileToOpen);
-      } else {
-        router.push(`/project${nextFileToOpen.url}`);
-      }
-    } else if (!state.openFiles.length) {
-      router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
+    if (nextFileToOpen.pending) {
+      dispatch('updateViewer', 'diff');
+      dispatch('openPendingTab', nextFileToOpen);
+    } else {
+      dispatch('updateDelayViewerUpdated', true);
+      router.push(`/project${nextFileToOpen.url}`);
     }
+  } else if (!getters.tabs.length) {
+    router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
   }
 
   eventHub.$emit(`editor.update.model.dispose.${file.key}`);
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 70a969a0325..b3edce08c34 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -2,9 +2,7 @@ import { normalizeHeaders } from '~/lib/utils/common_utils';
 import flash from '~/flash';
 import service from '../../services';
 import * as types from '../mutation_types';
-import {
-  findEntry,
-} from '../utils';
+import { findEntry } from '../utils';
 import FilesDecoratorWorker from '../workers/files_decorator_worker';
 
 export const toggleTreeOpen = ({ commit, dispatch }, path) => {
@@ -25,20 +23,29 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   }
 };
 
-export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
+export const getLastCommitData = (
+  { state, commit, dispatch, getters },
+  tree = state,
+) => {
   if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
 
-  service.getTreeLastCommit(tree.lastCommitPath)
-    .then((res) => {
-      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
+  service
+    .getTreeLastCommit(tree.lastCommitPath)
+    .then(res => {
+      const lastCommitPath =
+        normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
 
       commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
 
       return res.json();
     })
-    .then((data) => {
-      data.forEach((lastCommit) => {
-        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
+    .then(data => {
+      data.forEach(lastCommit => {
+        const entry = findEntry(
+          tree.tree,
+          lastCommit.type,
+          lastCommit.file_name,
+        );
 
         if (entry) {
           commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
@@ -47,47 +54,62 @@ export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = s
 
       dispatch('getLastCommitData', tree);
     })
-    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
+    .catch(() =>
+      flash('Error fetching log data.', 'alert', document, null, false, true),
+    );
 };
 
 export const getFiles = (
   { state, commit, dispatch },
   { projectId, branchId } = {},
-) => new Promise((resolve, reject) => {
-  if (!state.trees[`${projectId}/${branchId}`]) {
-    const selectedProject = state.projects[projectId];
-    commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.trees[`${projectId}/${branchId}`]) {
+      const selectedProject = state.projects[projectId];
+      commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
 
-    service
-      .getFiles(selectedProject.web_url, branchId)
-      .then(res => res.json())
-      .then((data) => {
-        const worker = new FilesDecoratorWorker();
-        worker.addEventListener('message', (e) => {
-          const { entries, treeList } = e.data;
-          const selectedTree = state.trees[`${projectId}/${branchId}`];
+      service
+        .getFiles(selectedProject.web_url, branchId)
+        .then(res => res.json())
+        .then(data => {
+          const worker = new FilesDecoratorWorker();
+          worker.addEventListener('message', e => {
+            const { entries, treeList } = e.data;
+            const selectedTree = state.trees[`${projectId}/${branchId}`];
 
-          commit(types.SET_ENTRIES, entries);
-          commit(types.SET_DIRECTORY_DATA, { treePath: `${projectId}/${branchId}`, data: treeList });
-          commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
+            commit(types.SET_ENTRIES, entries);
+            commit(types.SET_DIRECTORY_DATA, {
+              treePath: `${projectId}/${branchId}`,
+              data: treeList,
+            });
+            commit(types.TOGGLE_LOADING, {
+              entry: selectedTree,
+              forceValue: false,
+            });
 
-          worker.terminate();
+            worker.terminate();
 
-          resolve();
+            resolve();
+          });
+
+          worker.postMessage({
+            data,
+            projectId,
+            branchId,
+          });
+        })
+        .catch(e => {
+          flash(
+            'Error loading tree data. Please try again.',
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+          reject(e);
         });
-
-        worker.postMessage({
-          data,
-          projectId,
-          branchId,
-        });
-      })
-      .catch((e) => {
-        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
-        reject(e);
-      });
-  } else {
-    resolve();
-  }
-});
-
+    } else {
+      resolve();
+    }
+  });
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 65ea1e46b58..5dcbf9aa294 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -6,12 +6,14 @@ export default {
       active,
     });
 
-    Object.assign(state, {
-      pendingTabs: state.pendingTabs.map(f => ({
-        ...f,
-        active: false,
-      })),
-    });
+    if (active) {
+      Object.assign(state, {
+        pendingTabs: state.pendingTabs.map(f => ({
+          ...f,
+          active: false,
+        })),
+      });
+    }
   },
   [types.TOGGLE_FILE_OPEN](state, path) {
     Object.assign(state.entries[path], {
@@ -105,10 +107,11 @@ export default {
           pending: true,
           key: `pending-${file.key}`,
         }),
-        openFiles: state.openFiles.map(f => ({
-          ...f,
-          active: false,
-        })),
+        openFiles: state.openFiles.map(f =>
+          Object.assign(f, {
+            active: false,
+          }),
+        ),
       });
     }
   },