refactor(studio): replace setTimeout hack with proper state invalidation

- Remove setTimeout hack in ObjectExplorer component
- Add refreshTrigger state pattern for data table refresh
- ObjectDataTable now re-fetches when refreshTrigger changes
- Eliminates race conditions from tab-switching hack
- Part of Phase 1.5: Data Refresh Fix task

Agent-Logs-Url: https://github.com/objectstack-ai/framework/sessions/6c441201-fefb-4ec4-90de-2d3cd9f043db

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Claude

apps/studio/src/components/ObjectDataTable.tsx

@@ -21,6 +21,7 @@ import {
 interface ObjectDataTableProps {
     objectApiName: string;
     onEdit: (record: any) => void;
+    refreshTrigger?: number;
 }
 
 function CellValue({ value, type }: { value: any; type: string }) {
@@ -78,7 +79,7 @@ function TableSkeleton({ cols }: { cols: number }) {
     );
 }
 
-export function ObjectDataTable({ objectApiName, onEdit }: ObjectDataTableProps) {
+export function ObjectDataTable({ objectApiName, onEdit, refreshTrigger = 0 }: ObjectDataTableProps) {
     const client = useClient();
     const [def, setDef] = useState<any>(null);
     const [records, setRecords] = useState<any[]>([]);
@@ -136,7 +137,7 @@ export function ObjectDataTable({ objectApiName, onEdit }: ObjectDataTableProps)
         }
         loadData();
         return () => { mounted = false; };
-    }, [client, objectApiName, page]);
+    }, [client, objectApiName, page, refreshTrigger]);
 
     async function handleDelete(id: string) {
         if (!confirm('Are you sure you want to delete this record?')) return;

apps/studio/src/components/ObjectExplorer.tsx

@@ -18,6 +18,8 @@ export function ObjectExplorer({ objectApiName }: ObjectExplorerProps) {
   const [activeTab, setActiveTab] = useState<ObjectTab>('schema');
   const [editingRecord, setEditingRecord] = useState<any>(null);
   const [showForm, setShowForm] = useState(false);
+  // Refresh trigger: increment this to force data table to refetch
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
 
   function handleEdit(record: any) {
     setEditingRecord(record);
@@ -27,11 +29,8 @@ export function ObjectExplorer({ objectApiName }: ObjectExplorerProps) {
   function handleFormSuccess() {
     setShowForm(false);
     setEditingRecord(null);
-    // Force data tab re-fetch by toggling activeTab
-    if (activeTab === 'data') {
-      setActiveTab('schema');
-      setTimeout(() => setActiveTab('data'), 0);
-    }
+    // Trigger data table refresh by incrementing the refresh counter
+    setRefreshTrigger(prev => prev + 1);
   }
 
   const tabs: { id: ObjectTab; label: string; icon: React.ElementType }[] = [
@@ -78,7 +77,7 @@ export function ObjectExplorer({ objectApiName }: ObjectExplorerProps) {
           <ObjectSchemaInspector objectApiName={objectApiName} />
         )}
         {activeTab === 'data' && (
-          <ObjectDataTable objectApiName={objectApiName} onEdit={handleEdit} />
+          <ObjectDataTable objectApiName={objectApiName} onEdit={handleEdit} refreshTrigger={refreshTrigger} />
         )}
         {activeTab === 'api' && (
           <ObjectApiConsole objectApiName={objectApiName} />