Perf: Cancel HTTP calls when UI switch context

Author: clemlesne

src/conversation-ui/src/App.jsx

@@ -59,10 +59,12 @@ function App() {
   const fetchConversations = async (idToSelect = null) => {
     if (!account) return;
 
+    const controller = new AbortController();
     const idToken = await getIdToken(account, instance);
 
     await client
       .get("/conversation", {
+        signal: controller.signal,
         timeout: 10_000,
         headers: {
           Authorization: `Bearer ${idToken}`,
@@ -93,6 +95,10 @@ function App() {
       .catch((err) => {
         console.error(err);
       });
+
+    return () => {
+      if (controller) controller.abort();
+    }
   };
 
   useEffect(() => {

src/conversation-ui/src/Conversation.jsx

@@ -41,13 +41,16 @@ function Conversation() {
   useEffect(() => {
     if (!account) return;
 
+    const controller = new AbortController();
+
     const fetchPrompts = async () => {
       if (conversationId) return;
 
       const idToken = await getIdToken(account, instance);
 
       await client
         .get("/prompt", {
+          signal: controller.signal,
           timeout: 10_000,
           headers: {
             Authorization: `Bearer ${idToken}`,
@@ -67,6 +70,10 @@ function Conversation() {
     };
 
     fetchPrompts();
+
+    return () => {
+      if (controller) controller.abort();
+    }
   }, [account, conversationId]);
 
   useMemo(() => {
@@ -95,6 +102,8 @@ function Conversation() {
   useEffect(() => {
     if (!account) return;
 
+    const controller = new AbortController();
+
     const fetchConversation = async () => {
       if (!conversationId) {
         setConversation({ messages: [] });
@@ -105,6 +114,7 @@ function Conversation() {
 
       await client
         .get(`/conversation/${conversationId}`, {
+          signal: controller.signal,
           timeout: 10_000,
           headers: {
             Authorization: `Bearer ${idToken}`,
@@ -120,12 +130,19 @@ function Conversation() {
     };
 
     fetchConversation();
+
+    return () => {
+      if (controller) controller.abort();
+    }
   }, [account, conversationId]);
 
   const sendMessage = () => {
     // Create a locache state cache, as state props wont't be updated until the next render
     let localMessages = [...conversation.messages];
 
+    const controller = new AbortController();
+    let source;
+
     // Append the message to the list
     const addMessages = (newMessages) => {
       // Update local state cache
@@ -155,6 +172,8 @@ function Conversation() {
       // First, create the message
       await client
         .post("/message", null, {
+          signal: controller.signal,
+          timeout: 10_000,
           params: {
             content: input,
             conversation_id: conversation ? conversation.id : null,
@@ -163,7 +182,6 @@ function Conversation() {
             secret: secret,
             language: userLang,
           },
-          timeout: 10_000,
           headers: {
             Authorization: `Bearer ${idToken}`,
           },
@@ -190,7 +208,7 @@ function Conversation() {
           const lastMessage = res.data.messages[res.data.messages.length - 1];
           let content = "";
           let actions = [];
-          const source = new EventSource(
+          source = new EventSource(
             `${client.defaults.baseURL}/message/${lastMessage.token}`
           );
           source.onmessage = (e) => {
@@ -258,6 +276,11 @@ function Conversation() {
 
     // Reset the input
     setInput("");
+
+    return () => {
+      if (controller) controller.abort();
+      if (source) source.close();
+    }
   };
 
   // Scroll to the bottom of the page when the conversation changes

src/conversation-ui/src/Search.jsx

@@ -23,14 +23,16 @@ function Search() {
 
     setLoading(true);
 
+    const controller = new AbortController();
     const idToken = await getIdToken(account, instance);
 
     await client
       .get("/message", {
+        signal: controller.signal,
+        timeout: 10_000,
         params: {
           q: input,
         },
-        timeout: 10_000,
         headers: {
           Authorization: `Bearer ${idToken}`,
         },
@@ -45,6 +47,10 @@ function Search() {
       .finally(() => {
         setLoading(false);
       });
+
+    return () => {
+      if (controller) controller.abort();
+    }
   };
 
   useMemo(() => {