Refactor ThemeLoadingOverlay to use CSS transitions and remove extra state/timer logic

[sourcery-ai]

The current implementation of the ThemeLoadingOverlay component uses extra state variables (shouldShow, isAnimatingOut) and a setTimeout to manage the fade-out animation and visibility of the overlay. This adds unnecessary complexity and can be simplified.

Suggested Improvement:

• Remove the additional state and timer logic.
• Use the isThemeLoaded prop directly to control the overlay's visibility and transitions.
• Leverage Tailwind/CSS transitions (e.g., transition-opacity duration-300 ease-in-out) to handle the fade-out effect.
• Conditionally render the overlay only when !isThemeLoaded.
• Optionally, add pointer-events-none when the overlay is hidden to prevent interaction.

Example Implementation:

export function ThemeLoadingOverlay({
  isThemeLoaded,
  className,
}: ThemeLoadingOverlayProps) {
  if (isThemeLoaded) return null;

  return (
    <div
      className={clsx(
        "fixed inset-0 z-50 bg-black/85 backdrop-blur-sm flex items-center justify-center transition-opacity duration-300 ease-in-out",
        !isThemeLoaded ? "opacity-100" : "opacity-0 pointer-events-none",
        className
      )}
    >
      <div className="bg-black/60 p-8 rounded-xl border border-gray-600/30 shadow-lg backdrop-blur-md flex flex-col items-center gap-5 text-gray-200">
        <LoadingSpinner text="Loading theme..." />
      </div>
    </div>
  );
}

Action Items:

1. Refactor the ThemeLoadingOverlay component to remove unnecessary state and timer logic.
2. Use CSS transitions for fade-out effects.
3. Ensure the overlay is only rendered when needed and is not interactable when hidden.

This change will simplify the component and make the transition logic more maintainable.

---

I created this issue for @Its4Nik from Its4Nik/DockStat#104 (comment).

Tips and commands

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.