AI Loading card
The AI loading card is a full card state when AI-generated information takes an extended amount of time to process and appear on-screen.
Overview
Resources
Install
yarn add @activecampaign/camp-components-aiImport
import { AiLoadingCard, LoadingContent } from '@activecampaign/camp-components-ai'Variations
Empty loading card
<AiLoadingCard
isLoading
styles={{
height: '150px',
width: '512px',
}}
/>Loading card with indicator
<AiLoadingCard
isLoading
loadingIndicatorSize="medium"
styles={{
height: '150px',
width: '512px',
}}
/>Custom content
Wrap children in the LoadingContent component to display custom content within the AiLoadingCard as this will replace any title or loading indicator.
<AiLoadingCard
isLoading
styles={{
height: '150px',
width: '512px'
}}
>
<LoadingContent>
<IllustrationSpot
size="medium"
use={{
large: {
raw: '<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M111.331 39.9172H124.613V62.0799H109.075C84.7255 62.0799 64.9863 81.8191 64.9863 106.169V86.262C64.9863 60.6665 85.7356 39.9172 111.331 39.9172Z" fill="white" stroke="#004CFF" stroke-width="2"/>\n<path d="M16.6697 39.9172H3.38818V59.7926H16.6385C42.2513 59.7926 63.0145 80.5559 63.0145 106.169V86.262C63.0145 60.6665 42.2652 39.9172 16.6697 39.9172Z" fill="#99B7FF" stroke="#004CFF" stroke-width="2"/>\n<mask id="mask0_4208_15785" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="39" width="124" height="68">\n<path d="M111.331 40.1898H124.612V62.3524H109.075C84.7254 62.3524 64.9862 82.0917 64.9862 106.441V86.5346C64.9862 60.939 85.7355 40.1898 111.331 40.1898Z" fill="white" stroke="#004CFF" stroke-width="2"/>\n<path d="M16.6697 40.1899H3.38818V60.0654H16.6385C42.2513 60.0654 63.0145 80.8286 63.0145 106.441V86.5348C63.0145 60.9392 42.2652 40.1899 16.6697 40.1899Z" fill="#99B7FF" stroke="#004CFF" stroke-width="2"/>\n</mask>\n<g mask="url(#mask0_4208_15785)">\n<g style="mix-blend-mode:multiply">\n<path d="M24.4929 12.119C24.4929 12.119 64 73.9045 64 120.244V12.119H24.4929Z" fill="#CEDDFF"/>\n</g>\n<g style="mix-blend-mode:multiply">\n<path d="M103.507 12.1189C103.507 12.1189 64.0002 73.9044 64.0002 120.244V12.1189H103.507Z" fill="#CEDDFF"/>\n</g>\n</g>\n<path d="M47.3656 9C47.3656 9 64.0002 70.7855 64.0002 117.125V9H47.3656Z" fill="#004CFF" stroke="#004CFF" stroke-width="2"/>\n<path d="M80.6349 9.00012C80.6349 9.00012 64.0004 70.7856 64.0004 117.125V9.00012H80.6349Z" fill="#004CFF" stroke="#004CFF" stroke-width="2"/>\n<path d="M111.331 40.1898H124.613V62.3525H109.075C84.7255 62.3525 64.9863 82.0917 64.9863 106.441V86.5346C64.9863 60.9391 85.7356 40.1898 111.331 40.1898Z" stroke="#004CFF" stroke-width="2"/>\n<path d="M16.6697 40.1898H3.38818V60.0653H16.6385C42.2513 60.0653 63.0145 80.8285 63.0145 106.441V86.5346C63.0145 60.9391 42.2652 40.1898 16.6697 40.1898Z" stroke="#004CFF" stroke-width="2"/>\n<path d="M64.0004 119.1L47.1634 94.226L80.8373 94.2261L64.0004 119.1Z" fill="#004CFF"/>\n</svg>\n'
},
medium: {
raw: '<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M58 16H61V25H55C43.402 25 34 34.402 34 46V40C34 26.7452 44.7452 16 58 16Z" stroke="#004CFF" stroke-width="2"/>\n<path d="M6 16H3V25H9C20.598 25 30 34.402 30 46V40C30 26.7452 19.2548 16 6 16Z" fill="#CEDDFF" stroke="#004CFF" stroke-width="2"/>\n<path d="M26 2C26 2 32 30 32 51V2H26Z" fill="#004CFF" stroke="#004CFF" stroke-width="2"/>\n<path d="M38 2C38 2 32 30 32 51V2H38Z" fill="#004CFF" stroke="#004CFF" stroke-width="2"/>\n<path d="M32 62L20.7417 45.5L43.2583 45.5L32 62Z" fill="#004CFF"/>\n</svg>\n'
},
small: {
raw: '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5 7H29C21.8203 7 16 12.8203 16 20V23H18C18 18.3056 21.8056 14.5 26.5 14.5H31.5V7ZM18.8091 15.8515C20.4468 11.8327 24.3926 9 29 9H29.5V12.5H26.5C23.4626 12.5 20.7264 13.7897 18.8091 15.8515Z" fill="#004CFF"/>\n<path d="M3 8H1.5V13.5H5.5C10.7467 13.5 15 17.7533 15 23V20C15 13.3726 9.62742 8 3 8Z" fill="#99B7FF"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 7H3C10.1797 7 16 12.8203 16 20V23H14C14 18.3056 10.1944 14.5 5.5 14.5H0.5V7ZM13.1909 15.8515C11.5532 11.8327 7.6074 9 3 9H2.5V12.5H5.5C8.53744 12.5 11.2736 13.7897 13.1909 15.8515Z" fill="#004CFF"/>\n<path d="M12 1C12 1 16 14.7143 16 25V1H12Z" fill="#004CFF"/>\n<path d="M20 1C20 1 16 14.7143 16 25V1H20Z" fill="#004CFF"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3333 0.5H16.4999V25H15.4999C15.4999 19.9101 14.5087 13.9509 13.5108 9.24661C13.0127 6.89822 12.5145 4.86991 12.1409 3.42905C11.9542 2.70872 11.7986 2.13548 11.6899 1.74278C11.6356 1.54643 11.5929 1.39523 11.5639 1.29337L11.5309 1.17811L11.5226 1.14922L11.52 1.14044L11.3333 0.5ZM12.6603 1.5C12.77 1.89661 12.9244 2.46649 13.1089 3.17809C13.4854 4.63009 13.9872 6.6732 14.489 9.03911C14.8397 10.6922 15.1911 12.5064 15.4999 14.3892V1.5H12.6603Z" fill="#004CFF"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6666 0.5H15.4999V25H16.4999C16.4999 19.9101 17.4912 13.9509 18.489 9.24661C18.9872 6.89822 19.4854 4.86991 19.8589 3.42905C20.0457 2.70872 20.2012 2.13548 20.3099 1.74278C20.3643 1.54643 20.4069 1.39523 20.4359 1.29337L20.4689 1.17811L20.4772 1.14922L20.4798 1.14044L20.6666 0.5ZM19.3395 1.5C19.2299 1.89661 19.0754 2.46649 18.8909 3.17809C18.5145 4.63009 18.0127 6.6732 17.5108 9.03911C17.1602 10.6922 16.8087 12.5064 16.4999 14.3892V1.5H19.3395Z" fill="#004CFF"/>\n<path d="M16 31L10.3708 22.75L21.6292 22.75L16 31Z" fill="#004CFF"/>\n</svg>\n'
}
}}
/>
<[object Object]>
Custom Loader
</[object Object]>
</LoadingContent>
</AiLoadingCard>Timed loading
In this example, you can “Toggle Loading” to change between viewing the Base Card and the Loading Card. This also includes a timer which displays a few different messages based on the amount of time spent in Loading state. This sample code is below, under GenerativeMarketingExample.
import React, { useState, useEffect } from 'react';
import type { StoryFn, Meta } from '@storybook/react';
import { AiLoadingCard, LoadingContent } from '../src';
import Button from '@activecampaign/camp-components-button';
import Styled from '@activecampaign/camp-components-styled';
import { Ai } from '@activecampaign/camp-components-icon';
import Flex from '@activecampaign/camp-components-flex';
import Text from '@activecampaign/camp-components-text';
import illustrations from '@activecampaign/camp-tokens-illustration';
import { SpotIllustration } from '@activecampaign/camp-components-illustration';
export default {
title: 'Ai/Loading Card',
component: AiLoadingCard,
subcomponents: { LoadingContent },
tags: ['autodocs'],
argTypes: {
children: {
control: 'none',
},
title: {
control: 'text',
},
},
} as Meta;
const baseSize = {
styles: {
width: '512px',
height: '150px',
},
};
export const Example = ({ ...args }) => {
return <AiLoadingCard {...baseSize} {...args} isLoading={args.isLoading} />;
};
Example.args = {
title: 'Title',
loadingIndicatorSize: 'medium',
isLoading: true,
};
export const Empty = (args) => {
return <AiLoadingCard {...baseSize} isLoading {...args} />;
};
export const IndicatorOnly = (args) => {
return <AiLoadingCard {...baseSize} isLoading loadingIndicatorSize="medium" {...args} />;
};
export const IndicatorAndTitle = (args) => {
return (
<AiLoadingCard
{...baseSize}
isLoading
loadingIndicatorSize="large"
title="Loading title"
{...args}
/>
);
};
export const CustomBackground = (args) => {
return <AiLoadingCard {...baseSize} isLoading loadingIndicatorSize="large" bg="pink" {...args} />;
};
export const CustomContent = (args) => {
return (
<AiLoadingCard isLoading {...baseSize} {...args}>
<LoadingContent>
{/* TODO: is our spot illustration, just NOT typesafe? this is red squiggled in my editor*/}
<SpotIllustration size="medium" use={illustrations.alignmentSpot} />
<Text.Heading>Custom Loader</Text.Heading>
</LoadingContent>
</AiLoadingCard>
);
};
// GenMar Demo
export const GenerativeMarketingExample: StoryFn = () => {
const baseSize = {
width: '425px',
height: '425px',
};
const [loading, setLoading] = useState(true);
// Timer + Loading Message
const [loadingMsg, setLoadingMsg] = useState(' ');
const [timer, setTimer] = useState(0);
useEffect(() => {
// Save the interval id to clear it later
const intervalId = setInterval(() => {
setTimer(timer + 1);
}, 1000);
if (timer > 12) {
setLoadingMsg("This only a demo. Nothing's gonna happen");
} else if (timer > 8) {
setLoadingMsg('This may take up to 20 seconds.');
} else if (timer > 4) {
setLoadingMsg('Still working...');
}
// Clear the interval on component unmount
return () => clearInterval(intervalId);
}, [timer]);
function resetTimer() {
setLoadingMsg(' ');
setTimer(0);
}
return (
<Flex
styles={{ gap: '16px', maxWidth: '400px', position: 'relative' }}
direction="column"
alignItems={'start'}
>
{/* Row of control */}
<Flex styles={{ gap: '16px' }} direction="row" alignItems="center">
<Button
onClick={() => {
setLoading((x) => !x);
resetTimer();
}}
>
Toggle Loading
</Button>
<Button.Outline
onClick={() => {
resetTimer();
}}
>
Reset Timer
</Button.Outline>
<Text.Body>{loading ? `Loading (${timer}s)` : 'Loaded'}</Text.Body>
</Flex>
<Styled
styles={{
...baseSize,
position: 'relative',
}}
>
{/* Base Card */}
<Styled
styles={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: '16px',
textAlign: 'center',
borderRadius: '8px',
border: `1px solid var(--Border-Supportive, #D4D7DC)`,
background: `var(--Background-Surface-Educational, #F7F8FF)`,
}}
>
<Ai size="medium" decorative />
<Text.Body>Enter a prompt to generate an image</Text.Body>
</Styled>
{/* Loading Card */}
<AiLoadingCard
dangerouslySetStyles={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
isLoading={loading}
loadingIndicatorSize="medium"
title={loadingMsg}
/>
</Styled>
</Flex>
);
};Last updated on