feat(dashboard): add basic search to profiles

apps/dashboard/src/components/profiles/table/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 import { DataTable } from '@/components/data-table';
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
@@ -5,6 +6,7 @@ import { Pagination } from '@/components/pagination';
 import { Button } from '@/components/ui/button';
 import { TableSkeleton } from '@/components/ui/table';
 import type { UseQueryResult } from '@tanstack/react-query';
+import isEqual from 'lodash.isequal';
 import { GanttChartIcon } from 'lucide-react';
 
 import type { IServiceProfile } from '@openpanel/db';
@@ -22,44 +24,53 @@ type Props =
       setCursor: Dispatch<SetStateAction<number>>;
     });
 
-export const ProfilesTable = ({ type, query, ...props }: Props) => {
-  const columns = useColumns(type);
-  const { data, isFetching, isLoading } = query;
+export const ProfilesTable = memo(
+  ({ type, query, ...props }: Props) => {
+    console.log('re-render');
 
-  if (isLoading) {
-    return <TableSkeleton cols={columns.length} />;
-  }
+    const columns = useColumns(type);
+    const { data, isFetching, isLoading } = query;
+
+    if (isLoading) {
+      return <TableSkeleton cols={columns.length} />;
+    }
+
+    if (data?.length === 0) {
+      return (
+        <FullPageEmptyState title="No profiles here" icon={GanttChartIcon}>
+          <p>Could not find any profiles</p>
+          {'cursor' in props && props.cursor !== 0 && (
+            <Button
+              className="mt-8"
+              variant="outline"
+              onClick={() => props.setCursor((p) => p - 1)}
+            >
+              Go to previous page
+            </Button>
+          )}
+        </FullPageEmptyState>
+      );
+    }
 
-  if (data?.length === 0) {
     return (
-      <FullPageEmptyState title="No profiles here" icon={GanttChartIcon}>
-        <p>Could not find any profiles</p>
-        {'cursor' in props && props.cursor !== 0 && (
-          <Button
-            className="mt-8"
-            variant="outline"
-            onClick={() => props.setCursor((p) => p - 1)}
-          >
-            Go to previous page
-          </Button>
+      <>
+        <DataTable data={data ?? []} columns={columns} />
+        {'cursor' in props && (
+          <Pagination
+            className="mt-2"
+            setCursor={props.setCursor}
+            cursor={props.cursor}
+            count={Infinity}
+            take={50}
+            loading={isFetching}
+          />
         )}
-      </FullPageEmptyState>
+      </>
     );
+  },
+  (prevProps, nextProps) => {
+    return isEqual(prevProps.query.data, nextProps.query.data);
   }
+);
 
-  return (
-    <>
-      <DataTable data={data ?? []} columns={columns} />
-      {'cursor' in props && (
-        <Pagination
-          className="mt-2"
-          setCursor={props.setCursor}
-          cursor={props.cursor}
-          count={Infinity}
-          take={50}
-          loading={isFetching}
-        />
-      )}
-    </>
-  );
-};
+ProfilesTable.displayName = 'ProfilesTable';