DataTable refactor.

src/components/common/DataTable.js

@@ -25,13 +25,13 @@ export function DataTable({
   const { page, pageSize, count } = pageInfo || {};
   const noResults = Boolean(query && data?.length === 0);
 
-  const handleChange = () => {
-    onChange?.({ query, page });
+  const handleChange = value => {
+    onChange?.({ query: value, page });
   };
 
   const handleSearch = value => {
     setQuery(value);
-    handleChange();
+    handleChange(value);
   };
 
   const handlePageChange = page => {

src/components/pages/settings/websites/WebsitesList.js

@@ -7,7 +7,7 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import { Button, Icon, Icons, Modal, ModalTrigger, Text, useToasts } from 'react-basics';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 export function WebsitesList({
   showTeam,
@@ -20,16 +20,20 @@ export function WebsitesList({
   const { user } = useUser();
   const [params, setParams] = useState({});
   const { get, useQuery } = useApi();
-  const { data, isLoading, error, refetch } = useQuery(
-    ['websites', includeTeams, onlyTeams],
-    () =>
-      get(`/users/${user?.id}/websites`, {
+  const count = useRef(0);
+  const q = useQuery(
+    ['websites', includeTeams, onlyTeams, params],
+    () => {
+      count.current += 1;
+      return get(`/users/${user?.id}/websites`, {
         includeTeams,
         onlyTeams,
         ...params,
-      }),
+      });
+    },
     { enabled: !!user },
   );
+  const { data, refetch, isLoading, error } = q;
   const { showToast } = useToasts();
 
   const handleChange = params => {
@@ -60,10 +64,10 @@ export function WebsitesList({
   );
 
   return (
-    <Page loading={isLoading} error={error}>
+    <Page loading={isLoading && count.current === 0} error={error}>
       {showHeader && <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>}
       <WebsitesTable
-        data={data}
+        data={data?.data}
         showTeam={showTeam}
         showEditButton={showEditButton}
         onChange={handleChange}

src/components/pages/settings/websites/WebsitesTable.js

@@ -8,7 +8,6 @@ import DataTable, { DataTableStyles } from 'components/common/DataTable';
 
 export function WebsitesTable({
   data = [],
-  filterValue,
   showTeam,
   showEditButton,
   openExternal = false,
@@ -17,12 +16,12 @@ export function WebsitesTable({
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
-  const showTable = data && (filterValue || data?.data?.length !== 0);
+  const showTable = data.length !== 0;
 
   return (
     <DataTable onChange={onChange}>
       {showTable && (
-        <GridTable data={data?.data}>
+        <GridTable data={data}>
           <GridColumn name="name" label={formatMessage(labels.name)} />
           <GridColumn name="domain" label={formatMessage(labels.domain)} />
           {showTeam && (