Implement infinite loading for table view

apps/desktop/src/renderer/components/databases/tables/table-view-body.tsx

@@ -1,5 +1,6 @@
+import { InView } from 'react-intersection-observer';
+
 import { TableViewEmptyPlaceholder } from '@/renderer/components/databases/tables/table-view-empty-placeholder';
-import { TableViewLoadMoreRow } from '@/renderer/components/databases/tables/table-view-load-more-row';
 import { TableViewRow } from '@/renderer/components/databases/tables/table-view-row';
 import { useDatabaseView } from '@/renderer/contexts/database-view';
 import { useRecordsQuery } from '@/renderer/hooks/use-records-query';
@@ -17,9 +18,14 @@ export const TableViewBody = () => {
       {records.map((record, index) => (
         <TableViewRow key={record.id} index={index} record={record} />
       ))}
-      {hasMore && (
-        <TableViewLoadMoreRow isPending={isPending} onClick={loadMore} />
-      )}
+      <InView
+        rootMargin="200px"
+        onChange={(inView) => {
+          if (inView && hasMore && !isPending) {
+            loadMore();
+          }
+        }}
+      ></InView>
     </div>
   );
 };

apps/desktop/src/renderer/components/databases/tables/table-view-load-more-row.tsx

@@ -1,27 +0,0 @@
-import { ArrowDown } from 'lucide-react';
-
-import { Spinner } from '@/renderer/components/ui/spinner';
-
-interface TableViewLoadMoreRowProps {
-  isPending: boolean;
-  onClick: () => void;
-}
-
-export const TableViewLoadMoreRow = ({
-  isPending,
-  onClick,
-}: TableViewLoadMoreRowProps) => {
-  return (
-    <button
-      type="button"
-      disabled={isPending}
-      className="animate-fade-in flex h-8 w-full cursor-pointer flex-row items-center gap-1 border-b pl-2 text-muted-foreground hover:bg-gray-50"
-      onClick={() => {
-        onClick();
-      }}
-    >
-      {isPending ? <Spinner /> : <ArrowDown className="size-4" />}
-      <span className="text-sm">Load more</span>
-    </button>
-  );
-};