AI Thinker

An animated Lottie-based component that provides visual feedback when AI is processing or thinking. Perfect for loading states and AI-powered features where users need to know the system is actively working.

Overview

Resources

Install


yarn add @camp/ai-thinker

Design Resources

The AI Thinker animation was designed using Lottie React and is available as a design asset (in json format).

Animation file: Download from Google Drive

Usage

Lazy Loading (Recommended)

To avoid unnecessary bundle size impact, use lazy loading with Suspense when implementing the AI Thinker.


import { lazy, Suspense } from 'react';
import { AiLoadingIndicator } from '@camp/ai-loading-indicator';
 
// Lazy load the thinker to reduce bundle size
const AnimatedThinker = lazy(() => import('@camp/ai-thinker'));
 
export const LoadingState = () => {
  return (
    <Suspense fallback={<AiLoadingIndicator size="large" />}>
      <AnimatedThinker width={48} height={48} />
    </Suspense>
  );
};

Variations

Default

The default AI Thinker displays a smooth, looping animation designed using Lottie React to indicate AI processing state.


import { AiThinker } from '@camp/ai-thinker';
 
<AiThinker width={48} height={48} />;

Custom Size

AI Thinker can be customized to different sizes based on your layout needs.


import { AiThinker } from '@camp/ai-thinker';
 
{
  /* Small size for inline contexts */
}
<AiThinker width={24} height={24} />;
 
{
  /* Medium size for loading states */
}
<AiThinker width={48} height={48} />;
 
{
  /* Large size for prominent loading screens */
}
<AiThinker width={96} height={96} />;

Best practices

Use AI Thinker specifically for AI-powered features and processing states
Implement lazy loading to minimize bundle size impact on your application
Choose appropriate sizes based on the context and surrounding elements
Consider using a fallback loading indicator while the component loads
Use consistently across your application for AI-related loading states

Content guidelines

✅ DO

Use for AI processing, analysis, or generation tasks
Implement lazy loading for optimal performance
Choose sizes that fit well with surrounding content
Provide fallback loading states during lazy loading
Use consistently across AI features in your app
The animation loops continuously but should be paired with appropriate loading context

🚫 DON’T

Don’t use for general loading states (use regular loading indicators)
Don’t load without lazy loading unless absolutely necessary
Don’t use sizes that are too large for the context
Don’t mix with other loading animations for AI features
Don’t forget to provide accessibility context for screen readers

Accessibility

The animation is purely decorative and should be accompanied by proper loading states
Consider adding aria-label or role="status" to the container for context
Ensure the loading state is announced to screen readers appropriately