diff --git a/scm-ui/ui-components/src/repos/DiffExpander.test.ts b/scm-ui/ui-components/src/repos/DiffExpander.test.ts
index ac930498d9..cefeb7085d 100644
--- a/scm-ui/ui-components/src/repos/DiffExpander.test.ts
+++ b/scm-ui/ui-components/src/repos/DiffExpander.test.ts
@@ -275,8 +275,11 @@ describe("with hunks the diff expander", () => {
   it("should return a really bix number for the expand bottom range of the last hunk", () => {
     expect(diffExpander.getHunk(3).maxExpandBottomRange).toBe(-1);
   });
-  it("should expand hunk with new line from api client at the bottom", async () => {
+  it("should create new hunk with new line from api client at the bottom", async () => {
     expect(diffExpander.getHunk(1).hunk.changes.length).toBe(7);
+    const oldHunkCount = diffExpander.hunkCount();
+    const expandedHunk = diffExpander.getHunk(1).hunk;
+    const subsequentHunk = diffExpander.getHunk(2).hunk;
     fetchMock.get("http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=20&end=21", "new line 1");
     let newFile: File;
     diffExpander.getHunk(1).expandBottom(1, file => {
@@ -284,11 +287,18 @@ describe("with hunks the diff expander", () => {
     });
     await fetchMock.flush(true);
     expect(fetchMock.done()).toBe(true);
-    expect(newFile!.hunks![1].changes.length).toBe(8);
-    expect(newFile!.hunks![1].changes[7].content).toBe("new line 1");
+    expect(newFile!.hunks!.length).toBe(oldHunkCount + 1);
+    expect(newFile!.hunks![1]).toBe(expandedHunk);
+    const newHunk = newFile!.hunks![2].changes;
+    expect(newHunk.length).toBe(1);
+    expect(newHunk[0].content).toBe("new line 1");
+    expect(newFile!.hunks![3]).toBe(subsequentHunk);
   });
-  it("should expand hunk with new line from api client at the top", async () => {
+  it("should create new hunk with new line from api client at the top", async () => {
     expect(diffExpander.getHunk(1).hunk.changes.length).toBe(7);
+    const oldHunkCount = diffExpander.hunkCount();
+    const expandedHunk = diffExpander.getHunk(1).hunk;
+    const preceedingHunk = diffExpander.getHunk(0).hunk;
     fetchMock.get(
       "http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=8&end=13",
       "new line 9\nnew line 10\nnew line 11\nnew line 12\nnew line 13"
@@ -299,7 +309,11 @@ describe("with hunks the diff expander", () => {
     });
     await fetchMock.flush(true);
     expect(fetchMock.done()).toBe(true);
-    expect(newFile!.hunks![1].changes.length).toBe(12);
+    expect(newFile!.hunks!.length).toBe(oldHunkCount + 1);
+    expect(newFile!.hunks![0]).toBe(preceedingHunk);
+    expect(newFile!.hunks![2]).toBe(expandedHunk);
+
+    expect(newFile!.hunks![1].changes.length).toBe(5);
     expect(newFile!.hunks![1].changes[0].content).toBe("new line 9");
     expect(newFile!.hunks![1].changes[0].oldLineNumber).toBe(9);
     expect(newFile!.hunks![1].changes[0].newLineNumber).toBe(9);
@@ -309,11 +323,9 @@ describe("with hunks the diff expander", () => {
     expect(newFile!.hunks![1].changes[4].content).toBe("new line 13");
     expect(newFile!.hunks![1].changes[4].oldLineNumber).toBe(13);
     expect(newFile!.hunks![1].changes[4].newLineNumber).toBe(13);
-    expect(newFile!.hunks![1].changes[5].content).toBe("line");
-    expect(newFile!.hunks![1].changes[5].oldLineNumber).toBe(14);
-    expect(newFile!.hunks![1].changes[5].newLineNumber).toBe(14);
   });
   it("should set fully expanded to true if expanded completely", async () => {
+    const oldHunkCount = diffExpander.hunkCount();
     fetchMock.get(
       "http://localhost:8081/scm/api/v2/content/abc/CommitMessage.js?start=40&end=50",
       "new line 40\nnew line 41\nnew line 42"
@@ -323,7 +335,8 @@ describe("with hunks the diff expander", () => {
       newFile = file;
     });
     await fetchMock.flush(true);
-    expect(newFile!.hunks![3].fullyExpanded).toBe(true);
+    expect(newFile!.hunks!.length).toBe(oldHunkCount + 1);
+    expect(newFile!.hunks![4].fullyExpanded).toBe(true);
   });
   it("should set end to -1 if requested to expand to the end", async () => {
     fetchMock.get(
@@ -335,7 +348,7 @@ describe("with hunks the diff expander", () => {
       newFile = file;
     });
     await fetchMock.flush(true);
-    expect(newFile!.hunks![3].fullyExpanded).toBe(true);
+    expect(newFile!.hunks![4].fullyExpanded).toBe(true);
   });
 });
 
diff --git a/scm-ui/ui-components/src/repos/DiffExpander.ts b/scm-ui/ui-components/src/repos/DiffExpander.ts
index c4f42c620e..9b94daec15 100644
--- a/scm-ui/ui-components/src/repos/DiffExpander.ts
+++ b/scm-ui/ui-components/src/repos/DiffExpander.ts
@@ -110,8 +110,10 @@ class DiffExpander {
       lines.pop();
     }
     const newChanges: Change[] = [];
-    let oldLineNumber = hunk!.changes![0]!.oldLineNumber! - lines.length;
-    let newLineNumber = hunk!.changes![0]!.newLineNumber! - lines.length;
+    const minOldLineNumberOfNewHunk = hunk.oldStart! - lines.length;
+    const minNewLineNumberOfNewHunk = hunk.newStart! - lines.length;
+    let oldLineNumber = minOldLineNumberOfNewHunk;
+    let newLineNumber = minNewLineNumberOfNewHunk;
 
     lines.forEach(line => {
       newChanges.push({
@@ -124,23 +126,21 @@ class DiffExpander {
       oldLineNumber += 1;
       newLineNumber += 1;
     });
-    hunk.changes.forEach(change => newChanges.push(change));
 
-    const newHunk = {
-      ...hunk,
-      oldStart: hunk.oldStart! - lines.length,
-      newStart: hunk.newStart! - lines.length,
-      oldLines: hunk.oldLines! + lines.length,
-      newLines: hunk.newLines! + lines.length,
+    const newHunk: Hunk = {
+      content: "",
+      oldStart: minOldLineNumberOfNewHunk,
+      newStart: minNewLineNumberOfNewHunk,
+      oldLines: lines.length,
+      newLines: lines.length,
       changes: newChanges
     };
     const newHunks: Hunk[] = [];
     this.file.hunks!.forEach((oldHunk: Hunk, i: number) => {
       if (i === n) {
         newHunks.push(newHunk);
-      } else {
-        newHunks.push(oldHunk);
       }
+      newHunks.push(oldHunk);
     });
     const newFile = { ...this.file, hunks: newHunks };
     callback(newFile);
@@ -151,9 +151,13 @@ class DiffExpander {
     if (lines[lines.length - 1] === "") {
       lines.pop();
     }
-    const newChanges = [...hunk.changes];
-    let oldLineNumber: number = this.getMaxOldLineNumber(newChanges);
-    let newLineNumber: number = this.getMaxNewLineNumber(newChanges);
+    const newChanges: Change[] = [];
+
+    const maxOldLineNumberFromPrecedingHunk = this.getMaxOldLineNumber(hunk.changes);
+    const maxNewLineNumberFromPrecedingHunk = this.getMaxNewLineNumber(hunk.changes);
+
+    let oldLineNumber: number = maxOldLineNumberFromPrecedingHunk;
+    let newLineNumber: number = maxNewLineNumberFromPrecedingHunk;
 
     lines.forEach(line => {
       oldLineNumber += 1;
@@ -167,19 +171,21 @@ class DiffExpander {
       });
     });
 
-    const newHunk = {
-      ...hunk,
-      oldLines: hunk.oldLines! + lines.length,
-      newLines: hunk.newLines! + lines.length,
+    const newHunk: Hunk = {
       changes: newChanges,
+      content: "",
+      oldStart: maxOldLineNumberFromPrecedingHunk + 1,
+      newStart: maxNewLineNumberFromPrecedingHunk + 1,
+      oldLines: lines.length,
+      newLines: lines.length,
       fullyExpanded: requestedLines < 0 || lines.length < requestedLines
     };
+
     const newHunks: Hunk[] = [];
     this.file.hunks!.forEach((oldHunk: Hunk, i: number) => {
+      newHunks.push(oldHunk);
       if (i === n) {
         newHunks.push(newHunk);
-      } else {
-        newHunks.push(oldHunk);
       }
     });
     const newFile = { ...this.file, hunks: newHunks };