fix: Tasklist flick (#676)

frontend/package.json

@@ -12,8 +12,8 @@
     "format": "prettier src/**/*.{ts,tsx} --write --loglevel error"
   },
   "dependencies": {
-    "@chainlit/react-components": "workspace:^",
     "@chainlit/react-client": "workspace:^",
+    "@chainlit/react-components": "workspace:^",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.9",
@@ -24,13 +24,13 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sonner": "^1.2.3",
     "react-hotkeys-hook": "^4.4.1",
     "react-i18next": "^14.0.0",
     "react-router-dom": "^6.15.0",
     "react-speech-recognition": "^3.10.0",
     "recoil": "^0.7.7",
     "regenerator-runtime": "^0.14.0",
+    "sonner": "^1.2.3",
     "usehooks-ts": "^2.9.1",
     "uuid": "^9.0.0",
     "yup": "^1.2.0"
@@ -46,4 +46,4 @@
     "vite": "^4.4.9",
     "vite-tsconfig-paths": "^4.2.0"
   }
-}
+}

frontend/src/components/molecules/tasklist/TaskList.tsx

@@ -1,8 +1,9 @@
-import { useFetch } from 'usehooks-ts';
+import { apiClient } from 'api';
+import { useMemo } from 'react';
 
 import { Box, Chip, List, Theme, useTheme } from '@mui/material';
 
-import { useChatData } from '@chainlit/react-client';
+import { useApi, useChatData } from '@chainlit/react-client';
 import { grey } from '@chainlit/react-components/theme';
 
 import { Translator } from 'components/i18n';
@@ -56,13 +57,25 @@ const TaskList = ({ isMobile }: { isMobile: boolean }) => {
 
   const tasklist = tasklists[tasklists.length - 1];
 
-  const url = tasklist?.url;
-
-  const { data, error } = useFetch(url);
+  // We remove the base URL since the useApi hook is already set with a base URL.
+  // This ensures we only pass the relative path and search parameters to the hook.
+  const url = useMemo(() => {
+    if (!tasklist?.url) return null;
+    const parsedUrl = new URL(tasklist.url);
+    return parsedUrl.pathname + parsedUrl.search;
+  }, [tasklist?.url]);
+
+  const { isLoading, error, data } = useApi<ITaskList>(
+    apiClient,
+    url ? url : null,
+    {
+      keepPreviousData: true
+    }
+  );
 
   if (!url) return null;
 
-  if (!data && !error) {
+  if (isLoading && !data) {
     return (
       <div>
         <Translator path="components.molecules.tasklist.TaskList.loading" />

libs/react-client/src/api/hooks/api.ts

@@ -15,7 +15,7 @@ const fetcher = async (
 
 function useApi<T>(
   client: ChainlitAPI,
-  path: string | null,
+  path?: string | null,
   options?: SWRConfiguration
 ) {
   const accessToken = useRecoilValue(accessTokenState);