Skip to main content

Loading Card API

The kittl.design.loadingCard API lets you create and manage loading card placeholders on the canvas. Loading cards are temporary visual placeholders that represent content being loaded, generated, or processed — commonly used during AI image generation.

Creating a Loading Card​

Use createLoadingCard to add a placeholder while an async operation is in progress.

// Simple loading placeholder
const loader = await kittl.design.loadingCard.createLoadingCard({
    position: { absolute: { left: 100, top: 50 } },
    size: { width: 300, height: 200 },
});

// Loading card with AI generation tracking
const aiLoader = await kittl.design.loadingCard.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',
});

See Loading Card API Reference for full parameter details.

Updating a Loading Card​

Use updateLoadingCard to modify an existing loading card — for example, to update progress info or reposition it.

// Update position
await kittl.design.loadingCard.updateLoadingCard({
    id: 'loading-card-id',
    position: { absolute: { left: 150, top: 100 } },
});

// Update generation metadata
await kittl.design.loadingCard.updateLoadingCard({
    id: 'loading-card-id',
    generationAverageSpeed: 3.2,
    generatingModelKey: 'improved-model-v2',
});

See Loading Card API Reference for full parameter details.

tip

Once the async operation completes, remove the loading card with kittl.design.object.removeObject({ id }) and add the actual content in its place.