fix appearnce

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-query-builder.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { ArrowDownAZ, ArrowUpAZ, Plus, X } from 'lucide-react'
+import { ArrowDownAZ, ArrowUpAZ, Loader2, Plus, X } from 'lucide-react'
 import { nanoid } from 'nanoid'
 import { Button, Combobox, Input } from '@/components/emcn'
 import type { FilterCondition, SortCondition } from '@/lib/table/filters/constants'
@@ -39,6 +39,8 @@ interface TableQueryBuilderProps {
   onApply: (options: QueryOptions) => void
   /** Callback to add a new row */
   onAddRow: () => void
+  /** Whether a query is currently loading */
+  isLoading?: boolean
 }
 
 /**
@@ -59,7 +61,12 @@ interface TableQueryBuilderProps {
  * />
  * ```
  */
-export function TableQueryBuilder({ columns, onApply, onAddRow }: TableQueryBuilderProps) {
+export function TableQueryBuilder({
+  columns,
+  onApply,
+  onAddRow,
+  isLoading = false,
+}: TableQueryBuilderProps) {
   const [conditions, setConditions] = useState<FilterCondition[]>([])
   const [sortCondition, setSortCondition] = useState<SortCondition | null>(null)
 
@@ -174,8 +181,9 @@ export function TableQueryBuilder({ columns, onApply, onAddRow }: TableQueryBuil
 
         {hasChanges && (
           <>
-            <Button variant='default' size='sm' onClick={handleApply}>
-              Apply
+            <Button variant='default' size='sm' onClick={handleApply} disabled={isLoading}>
+              {isLoading && <Loader2 className='mr-[4px] h-[12px] w-[12px] animate-spin' />}
+              {isLoading ? 'Applying...' : 'Apply'}
             </Button>
 
             <button

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table-data-viewer/components/table-body-states.tsx

@@ -64,17 +64,19 @@ interface TableEmptyRowsProps {
 export function TableEmptyRows({ columnCount, hasFilter, onAddRow }: TableEmptyRowsProps) {
   return (
     <TableRow>
-      <TableCell colSpan={columnCount + 1} className='h-[160px] text-center'>
-        <div className='flex flex-col items-center gap-[12px]'>
-          <span className='text-[13px] text-[var(--text-tertiary)]'>
-            {hasFilter ? 'No rows match your filter' : 'No data'}
-          </span>
-          {!hasFilter && (
-            <Button variant='default' size='sm' onClick={onAddRow}>
-              <Plus className='mr-[4px] h-[12px] w-[12px]' />
-              Add first row
-            </Button>
-          )}
+      <TableCell colSpan={columnCount + 1} className='h-[160px]'>
+        <div className='fixed left-1/2 -translate-x-1/2'>
+          <div className='flex flex-col items-center gap-[12px]'>
+            <span className='text-[13px] text-[var(--text-tertiary)]'>
+              {hasFilter ? 'No rows match your filter' : 'No data'}
+            </span>
+            {!hasFilter && (
+              <Button variant='default' size='sm' onClick={onAddRow}>
+                <Plus className='mr-[4px] h-[12px] w-[12px]' />
+                Add first row
+              </Button>
+            )}
+          </div>
         </div>
       </TableCell>
     </TableRow>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table-data-viewer/table-data-viewer.tsx

@@ -111,10 +111,14 @@ export function TableDataViewer() {
   /**
    * Applies new query options and resets pagination.
    */
-  const handleApplyQueryOptions = useCallback((options: QueryOptions) => {
-    setQueryOptions(options)
-    setCurrentPage(0)
-  }, [])
+  const handleApplyQueryOptions = useCallback(
+    (options: QueryOptions) => {
+      setQueryOptions(options)
+      setCurrentPage(0)
+      refetchRows()
+    },
+    [refetchRows]
+  )
 
   /**
    * Opens the delete modal for selected rows.
@@ -204,6 +208,7 @@ export function TableDataViewer() {
           columns={columns}
           onApply={handleApplyQueryOptions}
           onAddRow={handleAddRow}
+          isLoading={isLoadingRows}
         />
         {hasSelection && (
           <span className='text-[11px] text-[var(--text-tertiary)]'>{selectedCount} selected</span>