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

Props

Generated from @camp/thinker@5.7.2 source, ordered by production usage. * required.

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

Accessibility

Screen Reader Support

• 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