diff --git a/frontend/package.json b/frontend/package.json index 09dbdb8cad..83b185449b 100644 --- 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 index 3ba4e695fd..24954e876c 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: '@mui/material': specifier: ^5.14.10 version: 5.14.10(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.0)(react-dom@18.2.0)(react@18.2.0) + '@tanstack/react-query': + specifier: ^5.17.15 + version: 5.17.15(react@18.2.0) formik: specifier: ^2.4.3 version: 2.4.3(react@18.2.0) @@ -853,6 +856,19 @@ packages: resolution: {integrity: sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==} dev: true + /@tanstack/query-core@5.17.15: + resolution: {integrity: sha512-QURxpu77/ICA4d61aPvV7EcJ2MwmksxUejKBaq/xLcO2TUJAlXf4PFKHC/WxnVFI/7F1jeLx85AO3Vpk0+uBXw==} + dev: false + + /@tanstack/react-query@5.17.15(react@18.2.0): + resolution: {integrity: sha512-9qur91mOihaUN7pXm6ioDtS+4qgkBcCiIaZyvi3lZNcQZsrMGCYZ+eP3hiFrV4khoJyJrFUX1W0NcCVlgwNZxQ==} + peerDependencies: + react: ^18.0.0 + dependencies: + '@tanstack/query-core': 5.17.15 + react: 18.2.0 + dev: false + /@types/dom-speech-recognition@0.0.4: resolution: {integrity: sha512-zf2GwV/G6TdaLwpLDcGTIkHnXf8JEf/viMux+khqKQKDa8/8BAUtXXZS563GnvJ4Fg0PBLGAaFf2GekEVSZ6GQ==} dev: true diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 204675d71f..8fd40592a3 100644 --- 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 ( - - - - - - - - - - - + + + + + + + + + + + + + ); } diff --git a/frontend/src/components/molecules/tasklist/TaskList.tsx b/frontend/src/components/molecules/tasklist/TaskList.tsx index e0b4d55ab3..0ef33ae799 100644 --- 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(url, { + queryKey: ['tasklist'], + placeholderData: keepPreviousData + }); if (!url) return null; - if (!data && !error) { + if (isLoading) { return (
diff --git a/frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.ts new file mode 100644 index 0000000000..cf1af6422e --- /dev/null +++ b/frontend/src/hooks/useFetch.ts @@ -0,0 +1,15 @@ +import { UseQueryOptions, useQuery } from '@tanstack/react-query'; + +export const useFetch = ( + url?: string | null, + options?: UseQueryOptions +) => + useQuery({ + queryKey: [url], + queryFn: () => + url + ? fetch(url).then((res) => res.json()) + : Promise.reject('No URL provided'), + enabled: !!url, + ...options + });