CloudBeaver Documentation


Resource Loading

We are using React Suspense for data loading. (It's part of Concurrent Mode)

export const ExtendedDDLViewerTabPanel: NavNodeTransformViewComponent = observer(function ExtendedDDLViewerTabPanel({
  nodeId, folderId
}) {
  const extendedDDLResource = useResource(ExtendedDDLViewerTabPanel, ExtendedDDLResource, nodeId);
  const connectionDialectResource = useResource(ExtendedDDLViewerTabPanel, ConnectionDialectResource, connectionParam);

  return styled(style)(
          autoCursor: false,
      <MenuBar menu={menu} style={MENU_BAR_DEFAULT_STYLES} />
  1. We are loading resources with useResource
  2. when we access and it triggers suspense API
  3. <Loader suspense> used in TabPanel will display loading states

How it works:
useResource will load data and track resource outdating. It's returning state with data and isLoading, isLoaded, isOutdated, tryGetData
tryGetData is equivalent to data but it will not trigger suspense API and can be used to track loading states manually
The closest Loader will display states of loading.

useResource(component, resource, key)

component - can be React Component, React Functional Component, or React Hook
resource - resource instance or class
key - null (skip resource loading) or any other valid value

Returns undefined or loaded data (observable, suspense)


Returns undefined or loaded data (observable). Accessing this method will not trigger React Suspense.

useResource.exception: Error | Error[] | null


Returns true when the resource is in the progress of loading data.


Returns true when the resource is outdated.


Returns true when data is loaded and can be accessed via .data or .tryGetData. New data can be in the progress of loading or be outdated at the same time.


Returns true when an error occurred when loading.

Did we resolve your issue?