Fixed search field disappearing when results are empty. Closes #2879.

src/app/(main)/reports/ReportsDataTable.tsx

@@ -14,12 +14,8 @@ export default function ReportsDataTable({
 }) {
   const queryResult = useReports({ websiteId, teamId });
 
-  if (queryResult?.result?.data?.length === 0) {
-    return children;
-  }
-
   return (
-    <DataTable queryResult={queryResult}>
+    <DataTable queryResult={queryResult} renderEmpty={() => children}>
       {({ data }) => <ReportsTable data={data} showDomain={!websiteId} />}
     </DataTable>
   );

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

@@ -15,12 +15,8 @@ export function TeamsDataTable({
   const { user } = useLogin();
   const queryResult = useTeams(user.id);
 
-  if (queryResult?.result?.data?.length === 0) {
-    return children;
-  }
-
   return (
-    <DataTable queryResult={queryResult}>
+    <DataTable queryResult={queryResult} renderEmpty={() => children}>
       {({ data }) => {
         return <TeamsTable data={data} allowEdit={allowEdit} showActions={showActions} />;
       }}

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

@@ -12,12 +12,8 @@ export function UsersDataTable({
 }) {
   const queryResult = useUsers();
 
-  if (queryResult?.result?.data?.length === 0) {
-    return children;
-  }
-
   return (
-    <DataTable queryResult={queryResult}>
+    <DataTable queryResult={queryResult} renderEmpty={() => children}>
       {({ data }) => <UsersTable data={data} showActions={showActions} />}
     </DataTable>
   );

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

@@ -18,12 +18,8 @@ export function WebsitesDataTable({
 }) {
   const queryResult = useWebsites({ teamId });
 
-  if (queryResult?.result?.data?.length === 0) {
-    return children;
-  }
-
   return (
-    <DataTable queryResult={queryResult}>
+    <DataTable queryResult={queryResult} renderEmpty={() => children}>
       {({ data }) => (
         <WebsitesTable
           teamId={teamId}

src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx

@@ -13,12 +13,8 @@ export default function SessionsDataTable({
 }) {
   const queryResult = useWebsiteSessions(websiteId);
 
-  if (queryResult?.result?.data?.length === 0) {
-    return children;
-  }
-
   return (
-    <DataTable queryResult={queryResult} allowSearch={false}>
+    <DataTable queryResult={queryResult} allowSearch={false} renderEmpty={() => children}>
       {({ data }) => <SessionsTable data={data} showDomain={!websiteId} />}
     </DataTable>
   );

src/components/common/DataTable.tsx

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
-import { Banner, Loading, SearchField } from 'react-basics';
+import { Loading, SearchField } from 'react-basics';
 import { useMessages, useNavigation } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
 import { PagedQueryResult } from 'lib/types';
 import styles from './DataTable.module.css';
+import { LoadingPanel } from 'components/common/LoadingPanel';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
@@ -14,6 +15,7 @@ export interface DataTableProps {
   searchDelay?: number;
   allowSearch?: boolean;
   allowPaging?: boolean;
+  renderEmpty?: () => ReactNode;
   children: ReactNode | ((data: any) => ReactNode);
 }
 
@@ -22,6 +24,7 @@ export function DataTable({
   searchDelay = 600,
   allowSearch = true,
   allowPaging = true,
+  renderEmpty,
   children,
 }: DataTableProps) {
   const { formatMessage, labels, messages } = useMessages();
@@ -29,7 +32,7 @@ export function DataTable({
     result,
     params,
     setParams,
-    query: { error, isLoading },
+    query: { error, isLoading, isFetched },
   } = queryResult || {};
   const { page, pageSize, count, data } = result || {};
   const { query } = params || {};
@@ -46,10 +49,6 @@ export function DataTable({
     router.push(renderUrl({ page }));
   };
 
-  if (error) {
-    return <Banner variant="error">{formatMessage(messages.error)}</Banner>;
-  }
-
   return (
     <>
       {allowSearch && (hasData || query) && (
@@ -62,23 +61,27 @@ export function DataTable({
           placeholder={formatMessage(labels.search)}
         />
       )}
-      <div
+      <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
-        className={classNames(styles.body, { [styles.status]: isLoading || noResults || !hasData })}
+        <div
-      >
+          className={classNames(styles.body, {
-        {hasData ? (typeof children === 'function' ? children(result) : children) : null}
+            [styles.status]: isLoading || noResults || !hasData,
-        {isLoading && <Loading position="page" />}
+          })}
-        {!isLoading && !hasData && !query && <Empty />}
+        >
-        {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
+          {hasData ? (typeof children === 'function' ? children(result) : children) : null}
-      </div>
+          {isLoading && <Loading position="page" />}
-      {allowPaging && hasData && (
+          {!isLoading && !hasData && !query && (renderEmpty ? renderEmpty() : <Empty />)}
-        <Pager
+          {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
-          className={styles.pager}
+        </div>
-          page={page}
+        {allowPaging && hasData && (
-          pageSize={pageSize}
+          <Pager
-          count={count}
+            className={styles.pager}
-          onPageChange={handlePageChange}
+            page={page}
-        />
+            pageSize={pageSize}
-      )}
+            count={count}
+            onPageChange={handlePageChange}
+          />
+        )}
+      </LoadingPanel>
     </>
   );
 }