Unified loading states.

src/components/common/DataGrid.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-import { Loading, SearchField, Row, Column } from '@umami/react-zen';
+import { SearchField, Row, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { Empty } from '@/components/common/Empty';
 import { Pager } from '@/components/common/Pager';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PagedQueryResult } from '@/lib/types';
@@ -24,16 +23,14 @@ export function DataGrid({
   allowSearch = true,
   allowPaging = true,
   autoFocus,
-  renderEmpty,
   children,
 }: DataTableProps) {
-  const { formatMessage, labels, messages } = useMessages();
+  const { formatMessage, labels } = useMessages();
   const { result, params, setParams, query } = queryResult || {};
-  const { error, isLoading, isFetched } = query || {};
+  const { error, isLoading, isFetching } = query || {};
   const { page, pageSize, count, data } = result || {};
   const { search } = params || {};
   const hasData = Boolean(!isLoading && data?.length);
-  const noResults = Boolean(search && !hasData);
   const { router, renderUrl } = useNavigation();
 
   const handleSearch = (search: string) => {
@@ -46,7 +43,7 @@ export function DataGrid({
   };
 
   return (
-    <Column gap="4">
+    <Column gap="4" minHeight="300px">
       {allowSearch && (hasData || search) && (
         <Row width="280px" alignItems="center">
           <SearchField
@@ -58,12 +55,9 @@ export function DataGrid({
           />
         </Row>
       )}
-      <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
+      <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
         <Column>
           {hasData ? (typeof children === 'function' ? children(result) : children) : null}
-          {isLoading && <Loading position="page" />}
-          {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
-          {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
         </Column>
         {allowPaging && hasData && (
           <Row marginTop="6">

src/components/common/LoadingPanel.tsx

@@ -1,32 +1,59 @@
 import { ReactNode } from 'react';
-import { Spinner, Dots, Column, type ColumnProps } from '@umami/react-zen';
+import { Loading, Column, type ColumnProps } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { Empty } from '@/components/common/Empty';
 
+export interface LoadingPanelProps extends ColumnProps {
+  data?: any;
+  error?: Error;
+  isEmpty?: boolean;
+  isLoading?: boolean;
+  isFetching?: boolean;
+  loadingIcon?: 'dots' | 'spinner';
+  renderEmpty?: () => ReactNode;
+  children: ReactNode;
+}
+
 export function LoadingPanel({
+  data,
   error,
   isEmpty,
-  isFetched,
   isLoading,
+  isFetching,
   loadingIcon = 'dots',
   renderEmpty = () => <Empty />,
   children,
   ...props
-}: {
-  error?: Error;
-  isEmpty?: boolean;
-  isFetched?: boolean;
-  isLoading?: boolean;
-  loadingIcon?: 'dots' | 'spinner';
-  renderEmpty?: () => ReactNode;
-  children: ReactNode;
-} & ColumnProps) {
+}: LoadingPanelProps) {
+  const empty = isEmpty ?? checkEmpty(data);
+
   return (
-    <Column {...props}>
-      {isLoading && !isFetched && (loadingIcon === 'dots' ? <Dots /> : <Spinner />)}
+    <Column position="relative" flexGrow={1} {...props}>
+      {/* Show loading spinner only if no data exists */}
+      {(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}
+
+      {/* Show error */}
       {error && <ErrorMessage />}
-      {!error && !isLoading && isEmpty && renderEmpty()}
-      {!error && !isLoading && !isEmpty && children}
+
+      {/* Show empty state (once loaded) */}
+      {!error && !isLoading && !isFetching && empty && renderEmpty()}
+
+      {/* Show main content when data exists */}
+      {!error && !empty && children}
     </Column>
   );
 }
+
+function checkEmpty(data: any) {
+  if (!data) return false;
+
+  if (Array.isArray(data)) {
+    return data.length <= 0;
+  }
+
+  if (typeof data === 'object') {
+    return Object.keys(data).length <= 0;
+  }
+
+  return !!data;
+}

src/components/hooks/index.ts

@@ -1,5 +1,6 @@
 'use client';
 export * from './queries/useActiveUsersQuery';
+export * from './queries/useEventDataQuery';
 export * from './queries/useEventDataEventsQuery';
 export * from './queries/useEventDataPropertiesQuery';
 export * from './queries/useEventDataValuesQuery';
@@ -22,7 +23,6 @@ export * from './queries/useTeamWebsitesQuery';
 export * from './queries/useTeamMembersQuery';
 export * from './queries/useUserQuery';
 export * from './queries/useUsersQuery';
-export * from './queries/useUTMQuery';
 export * from './queries/useWebsiteQuery';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEventsQuery';

src/components/hooks/queries/useActiveUsersQuery.ts

@@ -1,10 +1,7 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useActyiveUsersQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useActyiveUsersQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   return useQuery<any>({
     queryKey: ['websites:active', websiteId],

src/components/hooks/queries/useEventDataEventsQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useEventDataEventsQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useEventDataPropertiesQuery.ts

@@ -1,11 +1,8 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useEventDataPropertiesQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useEventDataQuery.ts

@@ -0,0 +1,19 @@
+import { useApi } from '../useApi';
+import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
+
+export function useEventDataQuery(
+  websiteId: string,
+  eventId: string,
+  options?: ReactQueryOptions<any>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['websites:event-data', { websiteId, eventId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/event-data/${eventId}`, { ...params }),
+    enabled: !!(websiteId && eventId),
+    ...options,
+  });
+}

src/components/hooks/queries/useEventDataValuesQuery.ts

@@ -1,12 +1,12 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useEventDataValuesQuery(
   websiteId: string,
   eventName: string,
   propertyName: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);

src/components/hooks/queries/useLoginQuery.ts

@@ -1,4 +1,3 @@
-import { UseQueryResult } from '@tanstack/react-query';
 import { useApp, setUser } from '@/store/app';
 import { useApi } from '../useApi';
 
@@ -7,7 +6,7 @@ const selector = (state: { user: any }) => state.user;
 export function useLoginQuery(): {
   user: any;
   setUser: (data: any) => void;
-} & UseQueryResult {
+} {
   const { post, useQuery } = useApi();
   const user = useApp(selector);
 

src/components/hooks/queries/useReportsQuery.ts

@@ -1,8 +1,12 @@
 import { useApi } from '../useApi';
 import { usePagedQuery } from '../usePagedQuery';
 import { useModified } from '../useModified';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useReportsQuery({ websiteId, type }: { websiteId: string; type?: string }) {
+export function useReportsQuery(
+  { websiteId, type }: { websiteId: string; type?: string },
+  options?: ReactQueryOptions<any>,
+) {
   const { modified } = useModified(`reports:${type}`);
   const { get } = useApi();
 
@@ -10,5 +14,6 @@ export function useReportsQuery({ websiteId, type }: { websiteId: string; type?:
     queryKey: ['reports', { websiteId, type, modified }],
     queryFn: async () => get('/reports', { websiteId, type }),
     enabled: !!websiteId && !!type,
+    ...options,
   });
 }

src/components/hooks/queries/useResultQuery.ts

@@ -1,10 +1,10 @@
 import { useApi } from '@/components/hooks';
-import { UseQueryOptions, QueryKey } from '@tanstack/react-query';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useResultQuery<T>(
   type: string,
   params?: { [key: string]: any },
-  options?: Omit<UseQueryOptions<T, Error, T, QueryKey>, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<T>,
 ) {
   const { post, useQuery } = useApi();
 

src/components/hooks/queries/useSessionDataPropertiesQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useSessionDataPropertiesQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useSessionDataValuesQuery.ts

@@ -1,11 +1,11 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
 export function useSessionDataValuesQuery(
   websiteId: string,
   propertyName: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<any>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);

src/components/hooks/queries/useUTMQuery.ts

@@ -1,20 +0,0 @@
-import { useApi } from '../useApi';
-import { useFilterParams } from '../useFilterParams';
-import { UseQueryOptions } from '@tanstack/react-query';
-
-export function useUTMQuery(
-  websiteId: string,
-  queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
-  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
-) {
-  const { get, useQuery } = useApi();
-  const filterParams = useFilterParams(websiteId);
-
-  return useQuery({
-    queryKey: ['utm', websiteId, { ...filterParams, ...queryParams }],
-    queryFn: () =>
-      get(`/websites/${websiteId}/utm`, { websiteId, ...filterParams, ...queryParams }),
-    enabled: !!websiteId,
-    ...options,
-  });
-}

src/components/hooks/queries/useWebsiteEventsQuery.ts

@@ -1,12 +1,9 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
 import { usePagedQuery } from '../usePagedQuery';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteEventsQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useWebsiteEventsQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteEventsSeriesQuery.ts

@@ -1,11 +1,8 @@
 import { useApi } from '../useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
 
-export function useWebsiteEventsSeriesQuery(
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
+export function useWebsiteEventsSeriesQuery(websiteId: string, options?: ReactQueryOptions<any>) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -1,18 +1,24 @@
-import { UseQueryOptions } from '@tanstack/react-query';
+import { keepPreviousData } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 import { useSearchParams } from 'next/navigation';
+import { ReactQueryOptions } from '@/lib/types';
+
+export type WebsiteMetricsData = {
+  x: string;
+  y: number;
+}[];
 
 export function useWebsiteMetricsQuery(
   websiteId: string,
   queryParams: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
-  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
+  options?: ReactQueryOptions<WebsiteMetricsData>,
 ) {
   const { get, useQuery } = useApi();
   const filterParams = useFilterParams(websiteId);
   const searchParams = useSearchParams();
 
-  return useQuery({
+  return useQuery<WebsiteMetricsData>({
     queryKey: [
       'websites:metrics',
       {
@@ -21,18 +27,14 @@ export function useWebsiteMetricsQuery(
         ...queryParams,
       },
     ],
-    queryFn: async () => {
-      const data = await get(`/websites/${websiteId}/metrics`, {
+    queryFn: async () =>
+      get(`/websites/${websiteId}/metrics`, {
         ...filterParams,
         [searchParams.get('view')]: undefined,
         ...queryParams,
-      });
-
-      options?.onDataLoad?.(data);
-
-      return data;
-    },
+      }),
     enabled: !!websiteId,
+    placeholderData: keepPreviousData,
     ...options,
   });
 }

src/components/hooks/queries/useWebsitePageviewsQuery.ts

@@ -1,18 +1,22 @@
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
+import { ReactQueryOptions } from '@/lib/types';
+
+export interface WebsitePageviewsData {
+  pageviews: { x: string; y: number }[];
+  sessions: { x: string; y: number }[];
+}
 
 export function useWebsitePageviewsQuery(
-  websiteId: string,
-  compare?: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  { websiteId, compareMode }: { websiteId: string; compareMode?: string },
+  options?: ReactQueryOptions<WebsitePageviewsData>,
 ) {
   const { get, useQuery } = useApi();
-  const params = useFilterParams(websiteId);
+  const filterParams = useFilterParams(websiteId);
 
-  return useQuery({
-    queryKey: ['websites:pageviews', { websiteId, ...params, compare }],
-    queryFn: () => get(`/websites/${websiteId}/pageviews`, { ...params, compare }),
+  return useQuery<WebsitePageviewsData>({
+    queryKey: ['websites:pageviews', { websiteId, compareMode, ...filterParams }],
+    queryFn: () => get(`/websites/${websiteId}/pageviews`, { compareMode, ...filterParams }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteStatsQuery.ts

@@ -1,15 +1,31 @@
+import { UseQueryOptions } from '@tanstack/react-query';
 import { useApi } from '../useApi';
 import { useFilterParams } from '../useFilterParams';
 
+export interface WebsiteStatsData {
+  pageviews: number;
+  visitors: number;
+  visits: number;
+  bounces: number;
+  totaltime: number;
+  previous: {
+    pageviews: number;
+    visitors: number;
+    visits: number;
+    bounces: number;
+    totaltime: number;
+  };
+}
+
 export function useWebsiteStatsQuery(
   websiteId: string,
   compare?: string,
-  options?: { [key: string]: string },
+  options?: UseQueryOptions<WebsiteStatsData, Error, WebsiteStatsData>,
 ) {
   const { get, useQuery } = useApi();
   const params = useFilterParams(websiteId);
 
-  return useQuery({
+  return useQuery<WebsiteStatsData>({
     queryKey: ['websites:stats', { websiteId, ...params, compare }],
     queryFn: () => get(`/websites/${websiteId}/stats`, { ...params, compare }),
     enabled: !!websiteId,

src/components/input/DateFilter.tsx

@@ -100,13 +100,13 @@ export function DateFilter({
   };
 
   return (
-    <Row width="200px">
+    <Row width="280px">
       <Select
         value={value}
         placeholder={formatMessage(labels.selectDate)}
         onChange={handleChange}
         renderValue={renderValue}
-        popoverProps={{ placement: 'top', style: { width: 200 } }}
+        popoverProps={{ placement: 'bottom' }}
       >
         {options.map(({ label, value, divider }: any) => {
           return (

src/components/metrics/EventData.tsx

@@ -0,0 +1,22 @@
+import { Grid, Column, Text, Label } from '@umami/react-zen';
+import { useEventDataQuery } from '@/components/hooks';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+
+export function EventData({ websiteId, eventId }: { websiteId: string; eventId: string }) {
+  const { data, isLoading, error } = useEventDataQuery(websiteId, eventId);
+
+  return (
+    <LoadingPanel isLoading={isLoading} error={error}>
+      <Grid columns="1fr 1fr" gap="5">
+        {data?.map(({ dataKey, stringValue }) => {
+          return (
+            <Column key={dataKey}>
+              <Label>{dataKey}</Label>
+              <Text>{stringValue}</Text>
+            </Column>
+          );
+        })}
+      </Grid>
+    </LoadingPanel>
+  );
+}

src/components/metrics/LanguagesTable.tsx

@@ -1,13 +1,9 @@
 import { MetricsTable, MetricsTableProps } from './MetricsTable';
-import { percentFilter } from '@/lib/filters';
 import { useLocale } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
 import { useFormat } from '@/components/hooks';
 
-export function LanguagesTable({
-  onDataLoad,
-  ...props
-}: { onDataLoad: (data: any) => void } & MetricsTableProps) {
+export function LanguagesTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { locale } = useLocale();
   const { formatLanguage } = useFormat();
@@ -22,7 +18,6 @@ export function LanguagesTable({
       title={formatMessage(labels.languages)}
       type="language"
       metric={formatMessage(labels.visitors)}
-      onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLabel}
       searchFormattedValues={true}
     />

src/components/metrics/MetricsBar.tsx

@@ -1,22 +1,14 @@
 import { ReactNode } from 'react';
-import { Grid } from '@umami/react-zen';
-import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { Grid, GridProps } from '@umami/react-zen';
 
-export interface MetricsBarProps {
-  isLoading?: boolean;
-  isFetched?: boolean;
-  error?: Error;
+export interface MetricsBarProps extends GridProps {
   children?: ReactNode;
 }
 
-export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
+export function MetricsBar({ children, ...props }: MetricsBarProps) {
   return (
-    <LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
-      {!isLoading && !error && isFetched && (
-        <Grid columns="repeat(auto-fit, minmax(200px, 1fr))" width="100%" gap>
-          {children}
-        </Grid>
-      )}
-    </LoadingPanel>
+    <Grid columns="repeat(auto-fit, minmax(200px, 1fr))" gap {...props}>
+      {children}
+    </Grid>
   );
 }

src/components/metrics/MetricsTable.tsx

@@ -1,12 +1,12 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
-import { ErrorMessage } from '@/components/common/ErrorMessage';
+import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
 import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Arrow } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -15,7 +15,6 @@ export interface MetricsTableProps extends ListTableProps {
   dataFilter?: (data: any) => any;
   limit?: number;
   delay?: number;
-  onDataLoad?: (data: any) => void;
   onSearch?: (search: string) => void;
   allowSearch?: boolean;
   searchFormattedValues?: boolean;
@@ -30,7 +29,6 @@ export function MetricsTable({
   className,
   dataFilter,
   limit,
-  onDataLoad,
   delay = null,
   allowSearch = false,
   searchFormattedValues = false,
@@ -44,12 +42,11 @@ export function MetricsTable({
   const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetched, error } = useWebsiteMetricsQuery(
+  const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
     websiteId,
     { type, limit, search: searchFormattedValues ? undefined : search, ...params },
     {
       retryDelay: delay || DEFAULT_ANIMATION_DURATION,
-      onDataLoad,
     },
   );
 
@@ -84,25 +81,25 @@ export function MetricsTable({
 
   return (
     <Column gap="3" justifyContent="space-between">
-      {error && <ErrorMessage />}
-      <Row alignItems="center" justifyContent="space-between">
-        {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
-        {children}
-      </Row>
-      {data && !error && (
-        <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
-      )}
-      {!data && isLoading && !isFetched && <Loading icon="dots" />}
-      <Row justifyContent="center">
-        {showMore && data && !error && limit && (
-          <LinkButton href={renderUrl({ view: type })} variant="quiet">
-            <Text>{formatMessage(labels.more)}</Text>
-            <Icon size="sm">
-              <Arrow />
-            </Icon>
-          </LinkButton>
+      <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
+        <Row alignItems="center" justifyContent="space-between">
+          {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
+          {children}
+        </Row>
+        {data && (
+          <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
         )}
-      </Row>
+        <Row justifyContent="center">
+          {showMore && data && !error && limit && (
+            <LinkButton href={renderUrl({ view: type })} variant="quiet">
+              <Text>{formatMessage(labels.more)}</Text>
+              <Icon size="sm">
+                <Arrow />
+              </Icon>
+            </LinkButton>
+          )}
+        </Row>
+      </LoadingPanel>
     </Column>
   );
 }