fix: Tasklist flick

Chainlit · Jan 18, 2024 · 5041e1e · 5041e1e
1 parent 320e161
commit 5041e1e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 36 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,25 +12,26 @@
     "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",
     "@mui/lab": "^5.0.0-alpha.122",
     "@mui/material": "^5.14.10",
+    "@tanstack/react-query": "^5.17.15",
     "formik": "^2.4.3",
     "i18next": "^23.7.16",
     "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"

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { apiClient } from 'api';
 import { useAuth } from 'api/auth';
 import { useEffect } from 'react';
@@ -44,6 +45,8 @@ declare global {
   }
 }
 
+const queryClient = new QueryClient();
+
 function overrideTheme(theme: Theme) {
   const variant = theme.palette.mode;
   const variantOverride = window?.theme?.[variant] as ThemOverride;
@@ -102,37 +105,39 @@ function App() {
   }
 
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles
-        styles={{
-          body: { backgroundColor: theme.palette.background.default }
-        }}
-      />
-      <Toaster
-        className="toast"
-        position="top-right"
-        toastOptions={{
-          style: {
-            fontFamily: 'Inter',
-            background: theme.palette.background.paper,
-            border: `1px solid ${theme.palette.divider}`,
-            color: theme.palette.text.primary
-          }
-        }}
-      />
-      <Box
-        display="flex"
-        height="100vh"
-        width="100vw"
-        sx={{ overflowX: 'hidden' }}
-      >
-        <PromptPlayground />
-        <ChatSettingsModal />
-        <Hotkeys />
-        <SettingsModal />
-        <RouterProvider router={router} />
-      </Box>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles
+          styles={{
+            body: { backgroundColor: theme.palette.background.default }
+          }}
+        />
+        <Toaster
+          className="toast"
+          position="top-right"
+          toastOptions={{
+            style: {
+              fontFamily: 'Inter',
+              background: theme.palette.background.paper,
+              border: `1px solid ${theme.palette.divider}`,
+              color: theme.palette.text.primary
+            }
+          }}
+        />
+        <Box
+          display="flex"
+          height="100vh"
+          width="100vw"
+          sx={{ overflowX: 'hidden' }}
+        >
+          <PromptPlayground />
+          <ChatSettingsModal />
+          <Hotkeys />
+          <SettingsModal />
+          <RouterProvider router={router} />
+        </Box>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 }
 

diff --git a/frontend/src/components/molecules/tasklist/TaskList.tsx b/frontend/src/components/molecules/tasklist/TaskList.tsx
@@ -1,4 +1,4 @@
-import { useFetch } from 'usehooks-ts';
+import { keepPreviousData } from '@tanstack/react-query';
 
 import { Box, Chip, List, Theme, useTheme } from '@mui/material';
 
@@ -7,6 +7,8 @@ import { grey } from '@chainlit/react-components/theme';
 
 import { Translator } from 'components/i18n';
 
+import { useFetch } from 'hooks/useFetch';
+
 import { ITaskList, Task } from './Task';
 
 const Header = ({ status }: { status: string }) => {
@@ -58,11 +60,14 @@ const TaskList = ({ isMobile }: { isMobile: boolean }) => {
 
   const url = tasklist?.url;
 
-  const { data, error } = useFetch(url);
+  const { isLoading, error, data } = useFetch<ITaskList>(url, {
+    queryKey: ['tasklist'],
+    placeholderData: keepPreviousData
+  });
 
   if (!url) return null;
 
-  if (!data && !error) {
+  if (isLoading) {
     return (
       <div>
         <Translator path="components.molecules.tasklist.TaskList.loading" />

diff --git a/frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.ts
@@ -0,0 +1,15 @@
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+
+export const useFetch = <TData = unknown>(
+  url?: string | null,
+  options?: UseQueryOptions<TData, Error>
+) =>
+  useQuery<TData, Error>({
+    queryKey: [url],
+    queryFn: () =>
+      url
+        ? fetch(url).then((res) => res.json())
+        : Promise.reject('No URL provided'),
+    enabled: !!url,
+    ...options
+  });