Refactored useQuery functions.

src/app/(main)/settings/teams/TeamsDataTable.js

@@ -8,10 +8,13 @@ import useCache from 'store/cache';
 export function TeamsDataTable() {
   const { get } = useApi();
   const modified = useCache(state => state?.teams);
-  const queryResult = useFilterQuery(['teams', { modified }], params => {
-    return get(`/teams`, {
-      ...params,
-    });
+  const queryResult = useFilterQuery({
+    queryKey: ['teams', { modified }],
+    queryFn: params => {
+      return get(`/teams`, {
+        ...params,
+      });
+    },
   });
 
   return (

src/app/(main)/settings/teams/[id]/TeamMembers.js

@@ -7,15 +7,15 @@ import useCache from 'store/cache';
 export function TeamMembers({ teamId, readOnly }) {
   const { get } = useApi();
   const modified = useCache(state => state?.['team:members']);
-  const queryResult = useFilterQuery(
-    ['team:members', { teamId, modified }],
-    params => {
+  const queryResult = useFilterQuery({
+    queryKey: ['team:members', { teamId, modified }],
+    queryFn: params => {
       return get(`/teams/${teamId}/users`, {
         ...params,
       });
     },
-    { enabled: !!teamId },
-  );
+    enabled: !!teamId,
+  });
 
   return (
     <>

src/app/(main)/settings/teams/[id]/TeamSettings.js

@@ -17,15 +17,15 @@ export function TeamSettings({ teamId }) {
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
   const { showToast } = useToasts();
-  const { data, isLoading } = useQuery(
-    ['team', teamId],
-    () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['team', teamId],
+    queryFn: () => {
       if (teamId) {
         return get(`/teams/${teamId}`);
       }
     },
-    { cacheTime: 0 },
-  );
+    cacheTime: 0,
+  });
   const canEdit = data?.teamUser?.find(
     ({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
   );

src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js

@@ -12,7 +12,10 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
   const { formatMessage, labels } = useMessages();
   const { get, post, useQuery, useMutation } = useApi();
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
-  const { data: websites, isLoading } = useQuery(['websites'], () => get('/websites'));
+  const { data: websites, isLoading } = useQuery({
+    queryKey: ['websites'],
+    queryFn: () => get('/websites'),
+  });
   const [selected, setSelected] = useState([]);
   const hasData = websites && websites.data.length > 0;
 

src/app/(main)/settings/teams/[id]/TeamWebsites.js

@@ -13,15 +13,15 @@ export function TeamWebsites({ teamId }) {
   const { user } = useUser();
   const { get } = useApi();
   const modified = useCache(state => state?.['team:websites']);
-  const queryResult = useFilterQuery(
-    ['team:websites', { teamId, modified }],
-    params => {
+  const queryResult = useFilterQuery({
+    queryKey: ['team:websites', { teamId, modified }],
+    queryFn: params => {
       return get(`/teams/${teamId}/websites`, {
         ...params,
       });
     },
-    { enabled: !!user },
-  );
+    enabled: !!user,
+  });
 
   const handleChange = () => {
     queryResult.refetch();

src/app/(main)/settings/users/UserWebsites.js

@@ -7,15 +7,15 @@ export function UserWebsites({ userId }) {
   const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
     useApiFilter();
   const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery(
-    ['user:websites', userId, filter, page, pageSize],
-    () =>
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['user:websites', userId, filter, page, pageSize],
+    queryFn: () =>
       get(`/users/${userId}/websites`, {
         filter,
         page,
         pageSize,
       }),
-  );
+  });
   const hasData = data && data.length !== 0;
 
   return (

src/app/(main)/settings/users/UsersDataTable.js

@@ -9,10 +9,9 @@ import useCache from 'store/cache';
 export function UsersDataTable() {
   const { get } = useApi();
   const modified = useCache(state => state?.users);
-  const queryResult = useFilterQuery(['users', { modified }], params => {
-    return get(`/users`, {
-      ...params,
-    });
+  const queryResult = useFilterQuery({
+    queryKey: ['users', { modified }],
+    queryFn: params => get(`/users`, params),
   });
 
   return (

src/app/(main)/settings/users/[id]/UserSettings.js

@@ -14,15 +14,15 @@ export function UserSettings({ userId }) {
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
   const { showToast } = useToasts();
-  const { data, isLoading } = useQuery(
-    ['user', userId],
-    () => {
+  const { data, isLoading } = useQuery({
+    queryKey: ['user', userId],
+    queryFn: () => {
       if (userId) {
         return get(`/users/${userId}`);
       }
     },
-    { cacheTime: 0 },
-  );
+    cacheTime: 0,
+  });
 
   const handleSave = data => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });

src/app/(main)/settings/websites/WebsiteSettings.js

@@ -1,6 +1,6 @@
 'use client';
 import { useEffect, useState } from 'react';
-import { Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
+import { Item, Tabs, useToasts, Button, Text, Icon, Icons, Loading } from 'react-basics';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import PageHeader from 'components/layout/PageHeader';
@@ -16,7 +16,9 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { showToast } = useToasts();
-  const { data } = useQuery(['website', websiteId], () => get(`/websites/${websiteId}`), {
+  const { data, isLoading } = useQuery({
+    queryKey: ['website', websiteId],
+    queryFn: () => get(`/websites/${websiteId}`),
     enabled: !!websiteId,
     cacheTime: 0,
   });
@@ -46,6 +48,10 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
     }
   }, [data]);
 
+  if (isLoading || !values) {
+    return <Loading />;
+  }
+
   return (
     <>
       <PageHeader title={values?.name}>

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -21,17 +21,17 @@ function useWebsites(userId: string, { includeTeams, onlyTeams }) {
   const { get } = useApi();
   const modified = useCache((state: any) => state?.websites);
 
-  return useFilterQuery(
-    ['websites', { includeTeams, onlyTeams, modified }],
-    (params: any) => {
+  return useFilterQuery({
+    queryKey: ['websites', { includeTeams, onlyTeams, modified }],
+    queryFn: (params: any) => {
       return get(`/users/${userId}/websites`, {
         includeTeams,
         onlyTeams,
         ...params,
       });
     },
-    { enabled: !!userId },
-  );
+    enabled: !!userId,
+  });
 }
 
 export function WebsitesDataTable({