[ui] also immediately update jobs view

webui/src/components/AddModal.svelte

@@ -1,4 +1,6 @@
 <script context="module" lang="ts">
+  import mitt from "mitt";
+
   export type AddEvents = {
     files: File[];
     urls: string[];
@@ -7,7 +9,6 @@
 </script>
 
 <script lang="ts">
-  import mitt from "mitt";
   import { useNavigate } from "svelte-navigator";
   import type { ListingResult } from "upend/types";
   import Icon from "./utils/Icon.svelte";

webui/src/components/layout/Header.svelte

@@ -4,6 +4,7 @@
   import { addEmitter } from "../AddModal.svelte";
   import Icon from "../utils/Icon.svelte";
   import Input from "../utils/Input.svelte";
+  import { jobsEmitter } from "./Jobs.svelte";
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -28,8 +29,9 @@
     }
   }
 
-  function rescan() {
-    fetch("/api/refresh", { method: "POST" });
+  async function rescan() {
+    await fetch("/api/refresh", { method: "POST" });
+    jobsEmitter.emit("reload");
   }
 </script>
 
@@ -67,7 +69,7 @@
   .header {
     display: flex;
     align-items: center;
-    gap: .5rem;
+    gap: 0.5rem;
     padding: 0 0.5rem;
     height: 3.5rem;
     border-bottom: 1px solid var(--foreground);

webui/src/components/layout/Jobs.svelte

@@ -1,7 +1,16 @@
+<script lang="ts" context="module">
+  import mitt from "mitt";
+
+  export type JobsEvents = {
+    reload: undefined;
+  };
+  export const jobsEmitter = mitt<JobsEvents>();
+</script>
+
 <script lang="ts">
   import type { IJob } from "upend/types";
   import { fade } from "svelte/transition";
-import ProgessBar from "../utils/ProgessBar.svelte";
+  import ProgessBar from "../utils/ProgessBar.svelte";
 
   interface JobWithId extends IJob {
     id: string;
@@ -9,7 +18,9 @@ import ProgessBar from "../utils/ProgessBar.svelte";
 
   let jobs: JobWithId[] = [];
   let activeJobs: JobWithId[] = [];
+  let timeout: NodeJS.Timeout;
   async function updateJobs() {
+    clearTimeout(timeout);
     let request = await fetch("/api/jobs");
     jobs = await request.json();
 
@@ -20,12 +31,16 @@ import ProgessBar from "../utils/ProgessBar.svelte";
       });
 
     if (activeJobs.length) {
-      setTimeout(updateJobs, 500);
+      timeout = setTimeout(updateJobs, 500);
     } else {
-      setTimeout(updateJobs, 5000);
+      timeout = setTimeout(updateJobs, 5000);
     }
   }
   updateJobs();
+
+  jobsEmitter.on("reload", () => {
+    updateJobs();
+  });
 </script>
 
 {#each activeJobs as job (job.id)}