Merge pull request CyberTimon#1420 from RayJW/spinner-animation-gpu-usage-fix

Unload Spinner When Loading Is Done

Author: CyberTimon

src/components/panel/MainLibrary.tsx

@@ -165,6 +165,7 @@ export default function MainLibrary(props: MainLibraryProps) {
   const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
   const [latestVersion, setLatestVersion] = useState('');
   const [isBusyDelayed, setIsBusyDelayed] = useState(false);
+  const [isBusyLoaderMounted, setIsBusyLoaderMounted] = useState(false);
   const [isProgressHovered, setIsProgressHovered] = useState(false);
   const isSettingsOpen = useUIStore((state) => state.isSettingsOpen);
 
@@ -262,6 +263,12 @@ export default function MainLibrary(props: MainLibraryProps) {
     return () => clearTimeout(timer);
   }, [isBusy]);
 
+  useEffect(() => {
+    if (isBusyDelayed) {
+      setIsBusyLoaderMounted(true);
+    }
+  }, [isBusyDelayed]);
+
   useEffect(() => {
     const compareVersions = (v1: string, v2: string) => {
       const parts1 = v1.split('.').map(Number);
@@ -511,8 +518,15 @@ export default function MainLibrary(props: MainLibraryProps) {
                 className={`flex items-center gap-2 overflow-hidden transition-all duration-300 whitespace-nowrap ${
                   isBusyDelayed ? 'max-w-xs opacity-100' : 'max-w-0 opacity-0'
                 }`}
+                onTransitionEnd={(e) => {
+                  if (e.propertyName === 'opacity' && !isBusyDelayed) {
+                    setIsBusyLoaderMounted(false);
+                  }
+                }}
               >
-                <Loader2 size={14} className="animate-spin text-text-secondary shrink-0" />
+                {isBusyLoaderMounted && (
+                  <Loader2 size={14} className="animate-spin text-text-secondary shrink-0" />
+                )}
                 <div
                   className={`flex items-center transition-all duration-300 ease-out overflow-hidden ${
                     isProgressHovered && isBusyDelayed && (props.thumbnailProgress?.total ?? 0) > 0

src/components/panel/editor/EditorToolbar.tsx

@@ -49,6 +49,7 @@ const EditorToolbar = memo(
     const { t } = useTranslation();
     const isAnyLoading = isLoading;
     const [isLoaderVisible, setIsLoaderVisible] = useState(false);
+    const [isLoaderMounted, setIsLoaderMounted] = useState(false);
     const [disableLoaderTransition, setDisableLoaderTransition] = useState(false);
     const hideTimeoutRef = useRef<number | null>(null);
     const prevIsLoadingRef = useRef(isLoading);
@@ -138,6 +139,14 @@ const EditorToolbar = memo(
       };
     }, [isAnyLoading, isLoading, isLoaderVisible]);
 
+    useEffect(() => {
+      if (isLoaderVisible) {
+        setIsLoaderMounted(true);
+      } else if (disableLoaderTransition) {
+        setIsLoaderMounted(false);
+      }
+    }, [isLoaderVisible, disableLoaderTransition]);
+
     useEffect(() => {
       if (!isHistoryVisible) return;
       const handleClickOutside = (e: MouseEvent) => {
@@ -433,8 +442,13 @@ const EditorToolbar = memo(
                   isLoaderVisible ? 'max-w-4 opacity-100 ml-2' : 'max-w-0 opacity-0 ml-0',
                   disableLoaderTransition ? 'transition-none' : 'transition-all duration-300',
                 )}
+                onTransitionEnd={(e) => {
+                  if (e.propertyName === 'opacity' && !isLoaderVisible) {
+                    setIsLoaderMounted(false);
+                  }
+                }}
               >
-                <Loader2 size={12} className="text-text-secondary animate-spin" />
+                {isLoaderMounted && <Loader2 size={12} className="text-text-secondary animate-spin" />}
               </div>
             </div>