Skip to main content

sdk.loadingcardapi.createloadingcard

Home > @kittl/sdk > LoadingCardAPI > createLoadingCard

LoadingCardAPI.createLoadingCard() method​

Creates a new loading card placeholder in the design canvas.

This method creates a temporary visual placeholder that represents content being loaded, generated, or processed. Loading cards provide visual feedback during asynchronous operations and maintain layout space until the actual content becomes available. They are commonly used for AI-generated images, font loading states, and other time-consuming operations.

**Loading Card Features:** - Rectangular placeholder with customizable position and size - Support for viewport scaling to maintain responsive layouts - Optional metadata tracking (generation IDs, timing, model info) - Integration with progress tracking systems - Automatic lifecycle management for async operations

**Position and Sizing:** - Absolute positioning for precise placement on canvas - Relative positioning for dynamic layout integration - Viewport scaling support for responsive design workflows - Automatic size calculation based on expected content dimensions

**Metadata Tracking:** - Image generation tracking with unique IDs - Performance metrics (start times, generation speeds) - Model identification for AI-generated content - Custom naming for organization and debugging

Signature:

createLoadingCard(input: CreateLoadingCardInput, opts?: DesignApiOptions): NormalizedLoadingCardObject;

Parameters​

Parameter

Type

Description

input

CreateLoadingCardInput

Loading card creation configuration

opts

DesignApiOptions

(Optional) Optional execution configuration controlling patch behavior and change tracking

Returns:

NormalizedLoadingCardObject

The newly created loading card object with all computed properties

Exceptions​

When position calculation fails or constraints are violated

When size constraints are not met

When required metadata is malformed

Example​

// Create a simple loading placeholder
const loader = api.createLoadingCard({
  position: { absolute: { left: 100, top: 50 } },
  size: { width: 300, height: 200, applyViewportScale: false }
});

// Create with AI generation tracking
const aiLoader = api.createLoadingCard({
  position: { relative: { to: 'viewport', location: 'center' } },
  size: { width: 512, height: 512, applyViewportScale: true },
  imageGenerationId: 'gen-abc123',
  startedAt: Date.now(),
  generatingModelKey: 'dall-e-3',
  generationAverageSpeed: 2.5,
  name: 'AI Image Generation'
});