diff --git a/scm-ui/ui-components/src/repos/DiffExpander.test.ts b/scm-ui/ui-components/src/repos/DiffExpander.test.ts
index fcdaaa79f7..3534cf77d2 100644
--- a/scm-ui/ui-components/src/repos/DiffExpander.test.ts
+++ b/scm-ui/ui-components/src/repos/DiffExpander.test.ts
@@ -282,10 +282,10 @@ describe("with hunks the diff expander", () => {
     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 => {
-      newFile = file;
-    });
-    await fetchMock.flush(true);
+    await diffExpander
+      .getHunk(1)
+      .expandBottom(1)
+      .then(file => (newFile = file));
     expect(fetchMock.done()).toBe(true);
     expect(newFile!.hunks!.length).toBe(oldHunkCount + 1);
     expect(newFile!.hunks![1]).toBe(expandedHunk);
@@ -307,10 +307,10 @@ describe("with hunks the diff expander", () => {
       "new line 9\nnew line 10\nnew line 11\nnew line 12\nnew line 13"
     );
     let newFile: File;
-    diffExpander.getHunk(1).expandHead(5, file => {
-      newFile = file;
-    });
-    await fetchMock.flush(true);
+    await diffExpander
+      .getHunk(1)
+      .expandHead(5)
+      .then(file => (newFile = file));
     expect(fetchMock.done()).toBe(true);
     expect(newFile!.hunks!.length).toBe(oldHunkCount + 1);
     expect(newFile!.hunks![0]).toBe(preceedingHunk);
@@ -336,10 +336,10 @@ describe("with hunks the diff expander", () => {
       "new line 40\nnew line 41\nnew line 42"
     );
     let newFile: File;
-    diffExpander.getHunk(3).expandBottom(10, file => {
-      newFile = file;
-    });
-    await fetchMock.flush(true);
+    await diffExpander
+      .getHunk(3)
+      .expandBottom(10)
+      .then(file => (newFile = file));
     expect(newFile!.hunks!.length).toBe(oldHunkCount + 1);
     expect(newFile!.hunks![4].fullyExpanded).toBe(true);
   });
@@ -349,9 +349,10 @@ describe("with hunks the diff expander", () => {
       "new line 40\nnew line 41\nnew line 42"
     );
     let newFile: File;
-    diffExpander.getHunk(3).expandBottom(-1, file => {
-      newFile = file;
-    });
+    await diffExpander
+      .getHunk(3)
+      .expandBottom(-1)
+      .then(file => (newFile = file));
     await fetchMock.flush(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 9eeca6591c..cd348908fe 100644
--- a/scm-ui/ui-components/src/repos/DiffExpander.ts
+++ b/scm-ui/ui-components/src/repos/DiffExpander.ts
@@ -73,10 +73,10 @@ class DiffExpander {
     }
   };
 
-  expandHead = (n: number, count: number, callback: (newFile: File) => void) => {
+  expandHead: (n: number, count: number) => Promise<File> = (n, count) => {
     const start = this.minLineNumber(n) - Math.min(count, this.computeMaxExpandHeadRange(n)) - 1;
     const end = this.minLineNumber(n) - 1;
-    this.loadLines(start, end).then(lines => {
+    return this.loadLines(start, end).then(lines => {
       const hunk = this.file.hunks![n];
 
       const newHunk = this.createNewHunk(
@@ -86,19 +86,18 @@ class DiffExpander {
         lines.length
       );
 
-      const newFile = this.addHunkToFile(newHunk, n);
-      callback(newFile);
+      return this.addHunkToFile(newHunk, n);
     });
   };
 
-  expandBottom = (n: number, count: number, callback: (newFile: File) => void) => {
+  expandBottom: (n: number, count: number) => Promise<File> = (n, count) => {
     const maxExpandBottomRange = this.computeMaxExpandBottomRange(n);
     const start = this.maxLineNumber(n);
     const end =
       count > 0
         ? start + Math.min(count, maxExpandBottomRange > 0 ? maxExpandBottomRange : Number.MAX_SAFE_INTEGER)
         : -1;
-    this.loadLines(start, end).then(lines => {
+    return this.loadLines(start, end).then(lines => {
       const hunk = this.file.hunks![n];
 
       const newHunk: Hunk = this.createNewHunk(
@@ -108,8 +107,7 @@ class DiffExpander {
         count
       );
 
-      const newFile = this.addHunkToFile(newHunk, n + 1);
-      callback(newFile);
+      return this.addHunkToFile(newHunk, n + 1);
     });
   };
 
@@ -178,12 +176,12 @@ class DiffExpander {
     return lastChange.newLineNumber || lastChange.lineNumber!;
   };
 
-  getHunk: (n: number) => ExpandableHunk = (n: number) => {
+  getHunk: (n: number) => ExpandableHunk = n => {
     return {
       maxExpandHeadRange: this.computeMaxExpandHeadRange(n),
       maxExpandBottomRange: this.computeMaxExpandBottomRange(n),
-      expandHead: (count: number, callback: (newFile: File) => void) => this.expandHead(n, count, callback),
-      expandBottom: (count: number, callback: (newFile: File) => void) => this.expandBottom(n, count, callback),
+      expandHead: (count: number) => this.expandHead(n, count),
+      expandBottom: (count: number) => this.expandBottom(n, count),
       hunk: this.file?.hunks![n]
     };
   };
@@ -193,8 +191,8 @@ export type ExpandableHunk = {
   hunk: Hunk;
   maxExpandHeadRange: number;
   maxExpandBottomRange: number;
-  expandHead: (count: number, callback: (newFile: File) => void) => void;
-  expandBottom: (count: number, callback: (newFile: File) => void) => void;
+  expandHead: (count: number) => Promise<File>;
+  expandBottom: (count: number) => Promise<File>;
 };
 
 export default DiffExpander;
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index 4b9b37c5a4..6b39407830 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -78,7 +78,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const HunkDivider = styled.div`
-  background: #33b2e8;
+  background: #98d8f3;
   font-size: 0.7rem;
 `;
 
@@ -155,7 +155,7 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={() => expandableHunk.expandHead(expandableHunk.maxExpandHeadRange, this.diffExpanded)}>
+              <span onClick={() => expandableHunk.expandHead(expandableHunk.maxExpandHeadRange).then(this.diffExpanded)}>
                 {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
               </span>
             </HunkDivider>
@@ -165,10 +165,10 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={() => expandableHunk.expandHead(10, this.diffExpanded)}>
+              <span onClick={() => expandableHunk.expandHead(10).then(this.diffExpanded)}>
                 {this.props.t("diff.expandHeadByLines", { count: 10 })}
               </span>{" "}
-              <span onClick={() => expandableHunk.expandHead(expandableHunk.maxExpandHeadRange, this.diffExpanded)}>
+              <span onClick={() => expandableHunk.expandHead(expandableHunk.maxExpandHeadRange).then(this.diffExpanded)}>
                 {this.props.t("diff.expandHeadComplete", { count: expandableHunk.maxExpandHeadRange })}
               </span>
             </HunkDivider>
@@ -186,7 +186,7 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}>
+              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange).then(this.diffExpanded)}>
                 {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
               </span>
             </HunkDivider>
@@ -196,10 +196,10 @@ class DiffFile extends React.Component<Props, State> {
         return (
           <Decoration>
             <HunkDivider>
-              <span onClick={() => expandableHunk.expandBottom(10, this.diffExpanded)}>
+              <span onClick={() => expandableHunk.expandBottom(10).then(this.diffExpanded)}>
                 {this.props.t("diff.expandBottomByLines", { count: 10 })}
               </span>{" "}
-              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}>
+              <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange).then(this.diffExpanded)}>
                 {this.props.t("diff.expandBottomComplete", { count: expandableHunk.maxExpandBottomRange })}
               </span>
             </HunkDivider>
@@ -216,10 +216,10 @@ class DiffFile extends React.Component<Props, State> {
       return (
         <Decoration>
           <HunkDivider>
-            <span onClick={() => expandableHunk.expandBottom(10, this.diffExpanded)}>
+            <span onClick={() => expandableHunk.expandBottom(10).then(this.diffExpanded)}>
               {this.props.t("diff.expandLastBottomByLines")}
             </span>{" "}
-            <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange, this.diffExpanded)}>
+            <span onClick={() => expandableHunk.expandBottom(expandableHunk.maxExpandBottomRange).then(this.diffExpanded)}>
               {this.props.t("diff.expandLastBottomComplete")}
             </span>
           </HunkDivider>