WorkspacePaneTable.tsx

export function WorkspacePaneTable(
  props: WorkspacePaneProps<Workspace.WorkspaceItemHeaderTable>
) {
  let [selectedId, setSelectedId] = React.useState<Data.Id | null>(null);
  let catalog = Recoil.useRecoilValue(Data.$catalog);
  let table = catalog.schema_tables[props.item.name];

  let query = React.useMemo(() => createQuery(table), [table]);

  let panes = State.usePanesAPI();

  let onRowClick: QueryOutputProps["onRowClick"] = (row, ev) => {
    let id = row[0] as Data.Id;
    let shouldOpenANewPane = ev.altKey || ev.metaKey;
    if (shouldOpenANewPane) {
      panes.addItem(
        { kind: "RecordPane", id },
        { origin: props.pane, originRelativePosition: "after" }
      );
    } else {
      // >>> HERE WE START A NEW TRANSITION <<<
      React.startTransition(() => {
        if (selectedId != null && Data.idEqual(id, selectedId)) {
          setSelectedId(null);
        } else {
          setSelectedId(id);
        }
      });
    }
  };

  let isRowSelected: QueryOutputProps["isRowSelected"] = (row) => {
    let id = row[0] as Data.Id;
    return selectedId != null && Data.idEqual(id, selectedId);
  };

  let onCreateNew = () => {
    panes.addItem(
      { kind: "RecordPane", id: NewId.make(table.table_name) },
      { origin: props.pane, originRelativePosition: "after" }
    );
  };

  let toolbar = (
    <>
      <bp.Button intent="success" icon="plus" minimal onClick={onCreateNew}>
        Create new "{table.table_name}" record
      </bp.Button>
    </>
  );

  return (
    <WorkspacePane
      pane={props.pane}
      item={props.item}
      toolbar={toolbar}
      editable={false}
    >
      <PaneSection className={styles.output}>
        <QueryOutput
          query={query}
          analysis={null}
          params={{}}
          onRowClick={onRowClick}
          isRowSelected={isRowSelected}
        />
      </PaneSection>
      {/* >>> THIS COMPONENT BELOW WILL SUSPEND <<< */}
      {selectedId && (
        <PaneSection className={styles.output}>
          <UpdateRecord id={selectedId} onClose={() => setSelectedId(null)} />
        </PaneSection>
      )}
    </WorkspacePane>
  );
}