Implementation:TobikoData Sqlmesh LoadingContainer

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components
Last Updated	2026-02-07 20:00 GMT

Overview

A container component that conditionally displays loading indicators alongside content with configurable placement.

Description

The LoadingContainer component provides a flexible wrapper for displaying loading states with optional messages. It uses the LoadingIcon component and supports three placement options: left, right, or both sides of the content. When isLoading is false, the component renders only its children without any wrapper. The loading indicator includes a shrink-0 class to prevent layout shifts during loading. The component centers content and provides consistent spacing between loading elements and children.

Usage

Use LoadingContainer to wrap content that may be in a loading state. Set isLoading to true to display the loading indicator with optional message text. Choose the side prop to control indicator placement relative to content. This component is useful for inline loading states where the content container should remain in the layout.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/common/src/components/LoadingContainer/LoadingContainer.tsx

Signature

export interface LoadingContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  isLoading?: boolean
  message?: React.ReactNode
  side?: Side
  className?: string
}

export const LoadingContainer = React.forwardRef<HTMLDivElement, LoadingContainerProps>(
  ({
    isLoading = true,
    side = 'left',
    message,
    children,
    className,
  }, ref) => {
    // Implementation
  },
)

Import

import { LoadingContainer } from '@sqlmesh-common/components/LoadingContainer/LoadingContainer'

I/O Contract

Inputs

Name	Type	Required	Description
isLoading	boolean	No	Whether to show loading state (default: true)
message	React.ReactNode	No	Optional message to display with loading indicator
side	Side	No	'right' \| 'both' (default: 'left')
className	string	No	Additional CSS classes
children	React.ReactNode	No	Content to display
ref	React.Ref<HTMLDivElement>	No	Forward ref to container div

Outputs

Name	Type	Description
element	React.ReactElement	Container div with loading state or children only

Usage Examples

// Basic loading state
<LoadingContainer isLoading={true}>
  Content appears here
</LoadingContainer>

// With loading message
<LoadingContainer
  isLoading={isLoadingData}
  message="Loading data..."
>
  <DataTable data={data} />
</LoadingContainer>

// Right-side indicator
<LoadingContainer isLoading={true} side="right">
  Refreshing...
</LoadingContainer>

// Both sides (for emphasis)
<LoadingContainer isLoading={true} side="both" message="Processing">
  Large operation in progress
</LoadingContainer>

// Conditional loading
<LoadingContainer isLoading={isFetching}>
  {data ? <DisplayData data={data} /> : null}
</LoadingContainer>

// No loading state - just renders children
<LoadingContainer isLoading={false}>
  This content displays without any loading indicator
</LoadingContainer>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment