Custom Loader Component

[widlestudiollp]

📦 Custom Loader Component

Adds a highly customizable loader component for Retool applications with support for multiple loading states, progress tracking, skeleton screens, overlay modes, fullscreen loading experiences, and responsive layouts.

✨ Features Added

• Multiple loader types:

  • Spinner
  • Progress Loader
  • Steps Loader
  • Table Skeleton
  • Dashboard Skeleton
  • Form Skeleton

• Multiple spinner styles:

  • Circle
  • Dual Ring
  • Pulse
  • Bars
  • Ripple
  • Heartbeat
  • Cube Grid
  • Triangle
  • Wave
  • Dots

• Display modes:

  • Inline
  • Overlay
  • Fullscreen

• Theme support:

  • Light
  • Dark
  • Auto

• State handling:

  • Loading
  • Success
  • Error
  • Empty

• Dynamic progress calculation using query status objects

• Customizable:

  • Titles
  • Subtitles
  • Error messages
  • Empty messages
  • Rotating tips
  • Step lists

• Responsive design for desktop, tablet, and mobile devices

📤 Inputs

• loaderStateInput
• loaderType
• theme
• overlayMode
• title
• subtitle
• showProgress
• spinnerStyle
• progress
• errorMessage
• emptyMessage
• tips
• steps
• queryStates
• hideDelay

🎯 Use Cases

• Dashboard loading screens
• API request tracking
• Report generation
• Workflow processing
• Multi-step operations
• Data synchronization
• Skeleton loading states

🧪 Testing

Tested with:

• Dynamic query loading states
• Success / Error / Empty transitions
• Progress calculations
• Skeleton loaders
• Responsive layouts
• Theme switching
• Retool custom component framework

📚 Documentation

Includes:

• metadata.json
• README.md
• Component configuration examples
• Usage instructions