I'll create a custom MUI Switch component with a loading animation. When the switch is toggled, it will show a loading state until the promise resolves.

I've created a custom MUI Switch component with loading animation functionality. Here's what it includes:

1. LoadingSwitch Component: A styled MUI Switch that shows a circular progress indicator when in loading state.

2. Features:

   • Shows a loading spinner over the switch when loading
   • Disables the switch during loading to prevent multiple clicks
   • Slightly fades the switch thumb and changes track color during loading
   • Supports both controlled and uncontrolled usage patterns
   • Handles promises with the onToggle prop

3. Usage Examples:

   • Example 1: Uses the built-in promise handling with onToggle prop
   • Example 2: Shows how to manually control the loading state externally

The component is flexible and can be used in two main ways:

• With the onToggle prop that automatically handles loading state
• With external loading state management via the loading prop

You can customize the appearance further by adjusting the styling in the styled component definition.

I'll redesign the MUI switch component to be more sci-fi and polished, with the loading animation in the label area instead of on the switch itself.

I've completely redesigned the switch component with a more sci-fi, polished look that addresses all your concerns:

Key Improvements:

1. Better Loading Animation:

   • The loading indicator now appears in the label area with a pulsing "PROCESSING..." text
   • This is much less jarring than the previous circular loader on the switch itself

2. Improved Switch Styling:

   • Fixed the track and toggle button styling for a cleaner look
   • Added proper transitions for a smoother feel
   • Ensured the switch has the correct dimensions and positioning

3. ON/OFF Labels:

   • Added customizable labels that change based on the switch state
   • Default labels are "ON" and "OFF", but you can customize them (demo shows "ENABLED"/"DISABLED" and "ACTIVE"/"INACTIVE")
   • Labels change color when active for better visual feedback

4. Sci-Fi Control Panel Demo:

   • Created a demo that showcases the switches in a sci-fi control panel interface
   • Added gradient backgrounds and proper spacing for a futuristic feel

5. Fully TypeScript Compatible:

   • Properly typed all props and components
   • Added proper Next.js client component directives

The component now feels much more polished and "next level" with the loading state elegantly shown in the label area rather than disrupting the switch itself.