fix: abort ongoing requests when changing pages (#3927)

frontend/src/components/Sidebar.vue

@@ -129,6 +129,7 @@ import {
 import { files as api } from "@/api";
 import ProgressBar from "@/components/ProgressBar.vue";
 import prettyBytes from "pretty-bytes";
+import { StatusError } from "@/api/utils.js";
 
 const USAGE_DEFAULT = { used: "0 B", total: "0 B", usedPercentage: 0 };
 
@@ -136,7 +137,7 @@ export default {
   name: "sidebar",
   setup() {
     const usage = reactive(USAGE_DEFAULT);
-    return { usage };
+    return { usage, usageAbortController: new AbortController() };
   },
   components: {
     ProgressBar,
@@ -157,6 +158,9 @@ export default {
   },
   methods: {
     ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
+    abortOngoingFetchUsage() {
+      this.usageAbortController.abort();
+    },
     async fetchUsage() {
       const path = this.$route.path.endsWith("/")
         ? this.$route.path
@@ -166,13 +170,18 @@ export default {
         return Object.assign(this.usage, usageStats);
       }
       try {
-        const usage = await api.usage(path);
+        this.abortOngoingFetchUsage();
+        this.usageAbortController = new AbortController();
+        const usage = await api.usage(path, this.usageAbortController.signal);
         usageStats = {
           used: prettyBytes(usage.used, { binary: true }),
           total: prettyBytes(usage.total, { binary: true }),
           usedPercentage: Math.round((usage.used / usage.total) * 100),
         };
       } catch (error) {
+        if (error instanceof StatusError && error.is_canceled) {
+          return;
+        }
         this.$showError(error);
       }
       return Object.assign(this.usage, usageStats);
@@ -200,5 +209,8 @@ export default {
       immediate: true,
     },
   },
+  unmounted() {
+    this.abortOngoingFetchUsage();
+  },
 };
 </script>

frontend/src/components/prompts/FileList.vue

@@ -31,6 +31,7 @@ import { useFileStore } from "@/stores/file";
 
 import url from "@/utils/url";
 import { files } from "@/api";
+import { StatusError } from "@/api/utils.js";
 
 export default {
   name: "file-list",
@@ -43,6 +44,7 @@ export default {
       },
       selected: null,
       current: window.location.pathname,
+      nextAbortController: new AbortController(),
     };
   },
   inject: ["$showError"],
@@ -56,7 +58,13 @@ export default {
   mounted() {
     this.fillOptions(this.req);
   },
+  unmounted() {
+    this.abortOngoingNext();
+  },
   methods: {
+    abortOngoingNext() {
+      this.nextAbortController.abort();
+    },
     fillOptions(req) {
       // Sets the current path and resets
       // the current items.
@@ -94,8 +102,17 @@ export default {
       // just clicked in and fill the options with its
       // content.
       const uri = event.currentTarget.dataset.url;
-
-      files.fetch(uri).then(this.fillOptions).catch(this.$showError);
+      this.abortOngoingNext();
+      this.nextAbortController = new AbortController();
+      files
+        .fetch(uri, this.nextAbortController.signal)
+        .then(this.fillOptions)
+        .catch((e) => {
+          if (e instanceof StatusError && e.is_canceled) {
+            return;
+          }
+          this.$showError(e);
+        });
     },
     touchstart(event) {
       const url = event.currentTarget.dataset.url;