Fix: Make the FK editor faster when loading tables (supabase#40259)

* updated selector code to be more efficient

* updated styling to show a cleaner table loader

* updated format assignment

* disable selector when loading

* updated request to fetch tables

* updated key rendering

Author: awaseem

apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx

@@ -1,12 +1,14 @@
+import type { PostgresTable } from '@supabase/postgres-meta'
 import { ArrowRight } from 'lucide-react'
 import type { PropsWithChildren } from 'react'
 import type { RenderCellProps } from 'react-data-grid'
 
 import { convertByteaToHex } from 'components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
 import { isTableLike } from 'data/table-editor/table-editor-types'
-import { useTablesQuery } from 'data/tables/tables-query'
+import { useTablesQuery as useTableRetrieveQuery } from 'data/tables/table-retrieve-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
 import type { SupaRow } from '../../types'
@@ -21,7 +23,7 @@ export const ForeignKeyFormatter = (props: Props) => {
   const { tableId, row, column } = props
   const { data: project } = useSelectedProjectQuery()
 
-  const { data } = useTableEditorQuery({
+  const { data, isLoading } = useTableEditorQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
     id: tableId,
@@ -35,17 +37,22 @@ export const ForeignKeyFormatter = (props: Props) => {
       r.source_table_name === selectedTable?.name &&
       r.source_column_name === column.name
   )
-  const { data: tables } = useTablesQuery({
-    projectRef: project?.ref,
-    includeColumns: true,
-    connectionString: project?.connectionString,
-    schema: relationship?.target_table_schema,
-  })
-  const targetTable = tables?.find(
-    (table) =>
-      table.schema === relationship?.target_table_schema &&
-      table.name === relationship.target_table_name
-  )
+
+  const { data: targetTable, isLoading: isLoadingTargetTable } =
+    useTableRetrieveQuery<PostgresTable>(
+      {
+        projectRef: project?.ref,
+        connectionString: project?.connectionString,
+        schema: relationship?.target_table_schema ?? '',
+        name: relationship?.target_table_name ?? '',
+      },
+      {
+        enabled:
+          !!project?.ref &&
+          !!relationship?.target_table_schema &&
+          !!relationship?.target_table_name,
+      }
+    )
 
   const value = row[column.key]
   const formattedValue =
@@ -56,25 +63,39 @@ export const ForeignKeyFormatter = (props: Props) => {
       <span className="sb-grid-foreign-key-formatter__text">
         {formattedValue === null ? <NullValue /> : formattedValue}
       </span>
-      {relationship !== undefined && targetTable !== undefined && formattedValue !== null && (
-        <Popover_Shadcn_>
-          <PopoverTrigger_Shadcn_ asChild>
-            <ButtonTooltip
-              type="default"
-              className="w-6 h-6"
-              icon={<ArrowRight />}
-              onClick={(e) => e.stopPropagation()}
-              tooltip={{ content: { side: 'bottom', text: 'View referencing record' } }}
-            />
-          </PopoverTrigger_Shadcn_>
-          <PopoverContent_Shadcn_ portal align="end" className="p-0 w-96">
-            <ReferenceRecordPeek
-              table={targetTable}
-              column={relationship.target_column_name}
-              value={formattedValue}
-            />
-          </PopoverContent_Shadcn_>
-        </Popover_Shadcn_>
+      {isLoading && formattedValue !== null && (
+        <div className="w-6 h-6 flex items-center justify-center">
+          <ShimmeringLoader className="w-4 h-4" />
+        </div>
+      )}
+      {!isLoading && relationship !== undefined && formattedValue !== null && (
+        <>
+          {isLoadingTargetTable && (
+            <div className="w-6 h-6 flex items-center justify-center">
+              <ShimmeringLoader className="w-4 h-4" />
+            </div>
+          )}
+          {!isLoadingTargetTable && targetTable !== undefined && (
+            <Popover_Shadcn_>
+              <PopoverTrigger_Shadcn_ asChild>
+                <ButtonTooltip
+                  type="default"
+                  className="w-6 h-6"
+                  icon={<ArrowRight />}
+                  onClick={(e) => e.stopPropagation()}
+                  tooltip={{ content: { side: 'bottom', text: 'View referencing record' } }}
+                />
+              </PopoverTrigger_Shadcn_>
+              <PopoverContent_Shadcn_ portal align="end" className="p-0 w-96">
+                <ReferenceRecordPeek
+                  table={targetTable}
+                  column={relationship.target_column_name}
+                  value={formattedValue}
+                />
+              </PopoverContent_Shadcn_>
+            </Popover_Shadcn_>
+          )}
+        </>
       )}
     </div>
   )

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx

@@ -47,7 +47,7 @@ const ColumnForeignKey = ({
     return {
       id: c.id,
       name: c.name,
-      format: column.format || c.format,
+      format: c.format || column.format,
       isNewColumn: false,
     }
   })