Implementation:TobikoData Sqlmesh Loading

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

Overview

A flexible loading indicator component with optional spinner and customizable size, variant, and text.

Description

Loading is a React component that displays loading states with configurable visual styles. It supports six semantic variants (Primary, Secondary, Success, Warning, Danger, Info) that automatically apply appropriate color schemes for both light and dark themes. The component can display either text content, child elements, or a Spinner animation. Size options range from extra-small to extra-large, and the component integrates with SQLMesh's design system using the Title component for consistent typography. The variant-based theming ensures loading indicators match the context of the operation being performed.

Usage

Use this component to indicate loading states in asynchronous operations. Choose the variant based on the operation type (e.g., Warning for potentially destructive operations, Success for completed stages, Info for general loading). Include a spinner when the duration is indeterminate, and provide descriptive text to inform users about what's loading.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/loading/Loading.tsx

Signature

export default function Loading({
  hasSpinner = false,
  size = EnumSize.sm,
  variant = EnumVariant.Info,
  text,
  children,
  className,
}: {
  children?: React.ReactNode
  text?: string
  size?: Size
  variant?: Variant
  hasSpinner?: boolean
  className?: string
}): JSX.Element

Import

import Loading from '@components/loading/Loading'

I/O Contract

Inputs

Name	Type	Required	Description
hasSpinner	boolean	No	Whether to display an animated spinner (defaults to false)
size	Size	No	Size of the component (xs, sm, md, lg, xl; defaults to sm)
variant	Variant	No	Semantic variant affecting color scheme (defaults to Info)
text	string	No	Text to display; if provided, uses Title component for rendering
children	React.ReactNode	No	Child elements to display instead of text
className	string	No	Additional CSS classes to apply

Outputs

Name	Type	Description
JSX.Element	React component	Rendered loading indicator with optional spinner and content

Usage Examples

import Loading from '@components/loading/Loading'
import { EnumSize, EnumVariant } from '~/types/enum'

// Simple loading with spinner
<Loading
  hasSpinner={true}
  text="Loading data..."
  size={EnumSize.md}
  variant={EnumVariant.Info}
/>

// Warning loading state
<Loading
  hasSpinner={true}
  text="Applying changes..."
  variant={EnumVariant.Warning}
  size={EnumSize.lg}
/>

// Custom content loading
<Loading variant={EnumVariant.Success}>
  <span>Processing complete!</span>
</Loading>

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack