Broken animation changes but ill fix it

src/components/DlcSelectionDialog.tsx

@@ -31,10 +31,13 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
   estimatedTimeLeft = '',
 }) => {
   const [selectedDlcs, setSelectedDlcs] = useState<DlcInfo[]>([])
-  const [showContent, setShowContent] = useState(false)
+  // Use a simple string for animation state - keep it simple
+  const [animationState, setAnimationState] = useState('closed')
   const [searchQuery, setSearchQuery] = useState('')
   const [selectAll, setSelectAll] = useState(true)
   const [initialized, setInitialized] = useState(false)
+  // Track previous visibility to detect changes
+  const [prevVisible, setPrevVisible] = useState(false)
 
   // Initialize selected DLCs when DLC list changes
   useEffect(() => {
@@ -50,19 +53,33 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
     }
   }, [visible, dlcs, initialized])
 
-  // Handle visibility changes
+  // Handle animations on visibility changes
   useEffect(() => {
-    if (visible) {
-      // Show content immediately for better UX
-      const timer = setTimeout(() => {
-        setShowContent(true)
-      }, 50)
-      return () => clearTimeout(timer)
-    } else {
-      setShowContent(false)
-      setInitialized(false) // Reset initialized state when dialog closes
+    // Only respond to actual changes in visibility
+    if (visible !== prevVisible) {
+      if (visible) {
+        // Show animation
+        setAnimationState('visible')
+      } else {
+        // Hide animation - but only if we're currently visible
+        if (animationState === 'visible') {
+          setAnimationState('hiding')
+          // After animation completes, set to closed
+          const timer = setTimeout(() => {
+            setAnimationState('closed')
+            // Also reset initialization when fully closed
+            if (!visible) {
+              setInitialized(false)
+            }
+          }, 200) // Match animation duration
+          
+          return () => clearTimeout(timer)
+        }
+      }
+      // Update previous visibility
+      setPrevVisible(visible)
     }
-  }, [visible])
+  }, [visible, prevVisible, animationState])
 
   // Memoize filtered DLCs to avoid unnecessary recalculations
   const filteredDlcs = useMemo(() => {
@@ -115,10 +132,11 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
   }
 
   const handleConfirm = () => {
+    // Just call onConfirm directly
     onConfirm(selectedDlcs)
   }
 
-  // Modified to prevent closing when loading
+  // Handle overlay click
   const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     // Prevent clicks from propagating through the overlay
     e.stopPropagation()
@@ -129,6 +147,11 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
     }
   }
 
+  // Handle the close button click
+  const handleClose = () => {
+    onClose()
+  }
+
   // Count selected DLCs
   const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length
 
@@ -142,14 +165,19 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
     return ''
   }
 
-  if (!visible) return null
+  // Don't render anything if we're in closed state
+  if (animationState === 'closed') return null
+
+  // Generate appropriate classes based on animation state
+  const dialogClasses = `dlc-dialog-overlay ${animationState === 'hiding' ? 'exiting' : 'visible'}`
+  const contentClasses = `dlc-selection-dialog dialog-${animationState === 'hiding' ? 'exiting' : 'visible'}`
 
   return (
     <div
-      className={`dlc-dialog-overlay ${showContent ? 'visible' : ''}`}
+      className={dialogClasses}
       onClick={handleOverlayClick}
     >
-      <div className={`dlc-selection-dialog ${showContent ? 'dialog-visible' : ''}`}>
+      <div className={contentClasses}>
         <div className="dlc-dialog-header">
           <h3>{isEditMode ? 'Edit DLCs' : 'Select DLCs to Enable'}</h3>
           <div className="dlc-game-info">
@@ -222,7 +250,7 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
         <div className="dlc-dialog-actions">
           <button
             className="cancel-button"
-            onClick={onClose}
+            onClick={handleClose}
             disabled={isLoading && loadingProgress < 10} // Briefly disable to prevent accidental closing at start
           >
             Cancel
@@ -236,4 +264,4 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
   )
 }
 
-export default DlcSelectionDialog
+export default DlcSelectionDialog

src/components/ProgressDialog.tsx

@@ -27,24 +27,56 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   onClose,
 }) => {
   const [copySuccess, setCopySuccess] = useState(false)
-  const [showContent, setShowContent] = useState(false)
-
-  // Reset copy state when dialog visibility changes
+  // Use a simple string for animation state - keep it simple
+  const [animationState, setAnimationState] = useState('closed')
+  // Track previous visibility to detect changes
+  const [prevVisible, setPrevVisible] = useState(false)
+  
+  // Handle animations on visibility changes
   useEffect(() => {
-    if (!visible) {
-      setCopySuccess(false)
-      setShowContent(false)
-    } else {
-      // Add a small delay to trigger the entrance animation
+    // Only respond to actual changes in visibility
+    if (visible !== prevVisible) {
+      if (visible) {
+        // Show animation
+        setAnimationState('visible')
+      } else {
+        // Hide animation - but only if we're currently visible
+        if (animationState === 'visible') {
+          setAnimationState('hiding')
+          // After animation completes, set to closed
+          const timer = setTimeout(() => {
+            setAnimationState('closed')
+          }, 200) // Match animation duration
+          
+          return () => clearTimeout(timer)
+        }
+      }
+      // Update previous visibility
+      setPrevVisible(visible)
+    }
+  }, [visible, prevVisible, animationState])
+  
+  // Auto-close on progress completion
+  useEffect(() => {
+    // Only auto-close if showing and progress reaches 100% and not showing instructions
+    if (visible && progress >= 100 && !showInstructions && animationState === 'visible') {
+      // Wait a moment before closing
       const timer = setTimeout(() => {
-        setShowContent(true)
-      }, 50)
+        // Only proceed if we're still in visible state
+        if (animationState === 'visible' && onClose) {
+          onClose() // Call the onClose function directly
+        }
+      }, 1000) // Wait 1 second after completion
+      
       return () => clearTimeout(timer)
     }
-  }, [visible])
-
-  if (!visible) return null
-
+  }, [progress, showInstructions, animationState, visible, onClose])
+  
+  // Don't render if state is closed
+  if (animationState === 'closed') {
+    return null
+  }
+  
   const handleCopyCommand = () => {
     if (instructions?.command) {
       navigator.clipboard.writeText(instructions.command)
@@ -58,13 +90,10 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   }
 
   const handleClose = () => {
-    setShowContent(false)
-    // Delay closing to allow exit animation
-    setTimeout(() => {
-      if (onClose) {
-        onClose()
-      }
-    }, 300)
+    // If we can close, just call onClose directly
+    if (onClose) {
+      onClose()
+    }
   }
 
   // Prevent closing when in progress
@@ -146,13 +175,17 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   // Determine if close button should be enabled
   const isCloseButtonEnabled = showInstructions || progress >= 100
 
+  // Generate appropriate classes based on animation state
+  const dialogClasses = `progress-dialog-overlay ${animationState === 'hiding' ? 'exiting' : 'visible'}`
+  const contentClasses = `progress-dialog ${showInstructions ? 'with-instructions' : ''} dialog-${animationState === 'hiding' ? 'exiting' : 'visible'}`
+
   return (
     <div
-      className={`progress-dialog-overlay ${showContent ? 'visible' : ''}`}
+      className={dialogClasses}
       onClick={handleOverlayClick}
     >
       <div
-        className={`progress-dialog ${showInstructions ? 'with-instructions' : ''} ${showContent ? 'dialog-visible' : ''}`}
+        className={contentClasses}
       >
         <h3>{title}</h3>
         <p>{message}</p>
@@ -206,4 +239,4 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   )
 }
 
-export default ProgressDialog
+export default ProgressDialog