Prevent refetching commit data

Prevent refetching commit date after clicking Show more.

Changelog: performance

app/assets/javascripts/repository/log_tree.js

@@ -8,6 +8,12 @@ import refQuery from './queries/ref.query.graphql';
 const fetchpromises = {};
 const resolvers = {};
 let maxOffset;
+let nextOffset;
+let currentPath;
+
+function setNextOffset(offset) {
+  nextOffset = offset || null;
+}
 
 export function resolveCommit(commits, path, { resolve, entry }) {
   const commit = commits.find(
@@ -24,7 +30,17 @@ export function fetchLogsTree(client, path, offset, resolver = null, _maxOffset
     maxOffset = _maxOffset;
   }
 
-  if (Number(offset) > maxOffset) {
+  if (!currentPath || currentPath !== path) {
+    // ensures the nextOffset is reset if the user changed directories
+    setNextOffset(null);
+  }
+
+  currentPath = path;
+
+  const offsetNumber = Number(offset);
+
+  if (!nextOffset && offsetNumber > maxOffset) {
+    setNextOffset(offsetNumber - 25); // ensures commit data is fetched for newly added rows that need data from the previous request (requests are made in batches of 25).
     return Promise.resolve();
   }
 
@@ -47,7 +63,7 @@ export function fetchLogsTree(client, path, offset, resolver = null, _maxOffset
         path.replace(/^\//, ''),
       )}`,
       {
-        params: { format: 'json', offset },
+        params: { format: 'json', offset: nextOffset || offset },
       },
     )
     .then(({ data: newData, headers }) => {
@@ -66,10 +82,12 @@ export function fetchLogsTree(client, path, offset, resolver = null, _maxOffset
       delete fetchpromises[path];
 
       if (headerLogsOffset) {
+        setNextOffset(null);
         fetchLogsTree(client, path, headerLogsOffset);
       } else {
         delete resolvers[path];
         maxOffset = null;
+        setNextOffset(null);
       }
     });
 

spec/frontend/repository/log_tree_spec.js

@@ -69,6 +69,16 @@ describe('fetchLogsTree', () => {
     mock.restore();
   });
 
+  it('persists the offset for a given page if offset is larger than maximum offset', async () => {
+    await fetchLogsTree(client, 'path', '1000', resolver, 900).then(() => {});
+
+    await fetchLogsTree(client, 'path', '1100', resolver, 1200).then(() => {
+      expect(axios.get).toHaveBeenCalledWith('/gitlab-org/gitlab-foss/-/refs/main/logs_tree/path', {
+        params: { format: 'json', offset: 975 },
+      });
+    });
+  });
+
   it('does not call axios get if offset is larger than the maximum offset', () =>
     fetchLogsTree(client, '', '1000', resolver, 900).then(() => {
       expect(axios.get).not.toHaveBeenCalled();