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/thinker

Design Resources

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

Animation file: Download from Google Drive

Variations

Default

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


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

Custom Size

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


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

Usage

Lazy Loading (Recommended)

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


import { lazy, Suspense } from 'react';
import { LoadingIndicator } from '@camp/loading-indicator';
 
const AnimatedThinker = lazy(() => import('@camp/thinker').then((m) => ({ default: m.Thinker })));
 
export const LoadingState = () => {
  return (
    <Suspense fallback={<LoadingIndicator size="medium" />}>
      <AnimatedThinker width={48} height={48} />
    </Suspense>
  );
};

Best Practices

Use 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