diff --git a/scm-ui/ui-components/src/repos/DiffExpander.test.ts b/scm-ui/ui-components/src/repos/DiffExpander.test.ts
index c4f640cf20..3da9c69c76 100644
--- a/scm-ui/ui-components/src/repos/DiffExpander.test.ts
+++ b/scm-ui/ui-components/src/repos/DiffExpander.test.ts
@@ -309,4 +309,20 @@ describe("diff expander", () => {
   it("should return correct hunk", () => {
     expect(diffExpander.getHunk(1).hunk).toBe(HUNK_1);
   });
+
+  it("should return max expand head range for first hunk", () => {
+    expect(diffExpander.getHunk(0).maxExpandHeadRange).toBe(0);
+  });
+
+  it("should return max expand head range for hunks in the middle", () => {
+    expect(diffExpander.getHunk(1).maxExpandHeadRange).toBe(5);
+  });
+
+  it("should return max expand bottom range for hunks in the middle", () => {
+    expect(diffExpander.getHunk(1).maxExpandBottomRange).toBe(1);
+  });
+
+  it("should return a really bix number for the expand bottom range of the last hunk", () => {
+    expect(diffExpander.getHunk(3).maxExpandBottomRange).toBeGreaterThan(99999);
+  });
 });
diff --git a/scm-ui/ui-components/src/repos/DiffExpander.ts b/scm-ui/ui-components/src/repos/DiffExpander.ts
index a6a135e7b7..2ef1f74a80 100644
--- a/scm-ui/ui-components/src/repos/DiffExpander.ts
+++ b/scm-ui/ui-components/src/repos/DiffExpander.ts
@@ -35,15 +35,37 @@ class DiffExpander {
     return this.file.hunks.length;
   };
 
+  minLineNumber = (n: number) => {
+    return this.file.hunks[n].newStart;
+  };
+
+  maxLineNumber = (n: number) => {
+    return this.file.hunks[n].newStart + this.file.hunks[n].newLines;
+  };
+
+  computeMaxExpandHeadRange = (n: number) => {
+    if (n === 0) {
+      return this.minLineNumber(n) - 1;
+    }
+    return this.minLineNumber(n) - this.maxLineNumber(n - 1);
+  };
+
+  computeMaxExpandBottomRange = (n: number) => {
+    if (n === this.file.hunks.length - 1) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    return this.minLineNumber(n + 1) - this.maxLineNumber(n);
+  };
+
   getHunk: (n: number) => ExpandableHunk = (n: number) => {
     return {
-      maxExpandHeadRange: 10,
-      maxExpandBottomRange: 10,
+      maxExpandHeadRange: this.computeMaxExpandHeadRange(n),
+      maxExpandBottomRange: this.computeMaxExpandBottomRange(n),
       expandHead: () => {
-        console.log("expand head", n);
+        return this;
       },
       expandBottom: () => {
-        console.log("expand bottom", n);
+        return this;
       },
       hunk: this.file.hunks[n]
     };
@@ -54,8 +76,8 @@ export type ExpandableHunk = {
   hunk: Hunk;
   maxExpandHeadRange: number;
   maxExpandBottomRange: number;
-  expandHead: () => void;
-  expandBottom: () => void;
+  expandHead: () => DiffExpander;
+  expandBottom: () => DiffExpander;
 };
 
 export default DiffExpander;
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index e2b4a36f7d..04bd541728 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -147,7 +147,9 @@ class DiffFile extends React.Component<Props, State> {
     if (expandableHunk.maxExpandHeadRange > 0) {
       return (
         <Decoration>
-          <HunkDivider onClick={expandableHunk.expandHead}>{"Load first n lines"}</HunkDivider>
+          <HunkDivider onClick={() => this.setState({ diffExpander: expandableHunk.expandHead() })}>
+            {`Load ${expandableHunk.maxExpandHeadRange} more lines`}
+          </HunkDivider>
         </Decoration>
       );
     }
@@ -159,7 +161,9 @@ class DiffFile extends React.Component<Props, State> {
     if (expandableHunk.maxExpandBottomRange > 0) {
       return (
         <Decoration>
-          <HunkDivider onClick={expandableHunk.expandBottom}>{"Load last n lines"}</HunkDivider>
+          <HunkDivider onClick={() => this.setState({ diffExpander: expandableHunk.expandBottom() })}>
+            {`Load ${expandableHunk.maxExpandBottomRange} more lines`}
+          </HunkDivider>
         </Decoration>
       );
     }