fix(ui): remove flicker in commits view (#611)

ui/Screen/Project/Commits.svelte

@@ -3,11 +3,7 @@
   import { format } from "timeago.js";
 
   import * as path from "../../src/path.ts";
-  import {
-    commits as store,
-    fetchCommits,
-    formatTime,
-  } from "../../src/source.ts";
+  import { commits as store, formatTime } from "../../src/source.ts";
 
   import { Remote } from "../../DesignSystem/Component";
   import { Text } from "../../DesignSystem/Primitive";
@@ -16,9 +12,6 @@
   export let params = null;
 
   const projectId = params.id;
-  const branch = decodeURIComponent(params.branch);
-
-  fetchCommits({ projectId, branch });
 </script>
 
 <style>

ui/Screen/Project/Source.svelte

@@ -1,14 +1,16 @@
 <script>
   import { getContext } from "svelte";
-  import { link, location } from "svelte-spa-router";
+  import { push, location } from "svelte-spa-router";
   import { format } from "timeago.js";
 
   import * as path from "../../src/path.ts";
   import { project as projectStore } from "../../src/project.ts";
   import {
     currentPath,
     currentRevision,
+    fetchCommits,
     fetchRevisions,
+    commits as commitsStore,
     object as objectStore,
     ObjectType,
     readme,
@@ -29,6 +31,15 @@
 
   export const params = null;
 
+  const navigateOnReady = (path, store) => {
+    const unsubscribe = store.subscribe(state => {
+      if (state.status === "SUCCESS") {
+        push(path);
+      }
+    });
+    unsubscribe();
+  };
+
   const updateRevision = (projectId, revision) => {
     updateParams({
       path: path.extractProjectSourceObjectPath($location),
@@ -59,6 +70,7 @@
     revision: getRevision($currentRevision),
     type: path.extractProjectSourceObjectType($location),
   });
+  $: fetchCommits({ projectId: id, branch: getRevision($currentRevision) });
 
   fetchRevisions({ projectId: id });
 </script>
@@ -184,7 +196,7 @@
               <!-- svelte-ignore a11y-missing-attribute -->
               <a
                 data-cy="commits-button"
-                use:link={path.projectCommits(project.id, $currentRevision)}>
+                on:click={navigateOnReady(path.projectCommits(id, $currentRevision), commitsStore)}>
                 Commits
               </a>
             </Text>