Revert "Broken animation changes but ill fix it"

This reverts commit e29f44bbd5.

src/components/DlcSelectionDialog.tsx

@@ -31,13 +31,10 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
   estimatedTimeLeft = '',
 }) => {
   const [selectedDlcs, setSelectedDlcs] = useState<DlcInfo[]>([])
-  // Use a simple string for animation state - keep it simple
-  const [animationState, setAnimationState] = useState('closed')
+  const [showContent, setShowContent] = useState(false)
   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(() => {
@@ -53,33 +50,19 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
     }
   }, [visible, dlcs, initialized])
 
-  // Handle animations on visibility changes
+  // Handle visibility changes
   useEffect(() => {
-    // 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)
+    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
     }
-  }, [visible, prevVisible, animationState])
+  }, [visible])
 
   // Memoize filtered DLCs to avoid unnecessary recalculations
   const filteredDlcs = useMemo(() => {
@@ -132,11 +115,10 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
   }
 
   const handleConfirm = () => {
-    // Just call onConfirm directly
     onConfirm(selectedDlcs)
   }
 
-  // Handle overlay click
+  // Modified to prevent closing when loading
   const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
     // Prevent clicks from propagating through the overlay
     e.stopPropagation()
@@ -147,11 +129,6 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
     }
   }
 
-  // Handle the close button click
-  const handleClose = () => {
-    onClose()
-  }
-
   // Count selected DLCs
   const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length
 
@@ -165,19 +142,14 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
     return ''
   }
 
-  // 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'}`
+  if (!visible) return null
 
   return (
     <div
-      className={dialogClasses}
+      className={`dlc-dialog-overlay ${showContent ? 'visible' : ''}`}
       onClick={handleOverlayClick}
     >
-      <div className={contentClasses}>
+      <div className={`dlc-selection-dialog ${showContent ? 'dialog-visible' : ''}`}>
         <div className="dlc-dialog-header">
           <h3>{isEditMode ? 'Edit DLCs' : 'Select DLCs to Enable'}</h3>
           <div className="dlc-game-info">
@@ -250,7 +222,7 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
         <div className="dlc-dialog-actions">
           <button
             className="cancel-button"
-            onClick={handleClose}
+            onClick={onClose}
             disabled={isLoading && loadingProgress < 10} // Briefly disable to prevent accidental closing at start
           >
             Cancel
@@ -264,4 +236,4 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
   )
 }
 
-export default DlcSelectionDialog
+export default DlcSelectionDialog

src/components/ProgressDialog.tsx

@@ -27,56 +27,24 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   onClose,
 }) => {
   const [copySuccess, setCopySuccess] = useState(false)
-  // 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
+  const [showContent, setShowContent] = useState(false)
+
+  // Reset copy state when dialog visibility changes
   useEffect(() => {
-    // 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
+    if (!visible) {
+      setCopySuccess(false)
+      setShowContent(false)
+    } else {
+      // Add a small delay to trigger the entrance animation
       const timer = setTimeout(() => {
-        // 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
-      
+        setShowContent(true)
+      }, 50)
       return () => clearTimeout(timer)
     }
-  }, [progress, showInstructions, animationState, visible, onClose])
-  
-  // Don't render if state is closed
-  if (animationState === 'closed') {
-    return null
-  }
-  
+  }, [visible])
+
+  if (!visible) return null
+
   const handleCopyCommand = () => {
     if (instructions?.command) {
       navigator.clipboard.writeText(instructions.command)
@@ -90,10 +58,13 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   }
 
   const handleClose = () => {
-    // If we can close, just call onClose directly
-    if (onClose) {
-      onClose()
-    }
+    setShowContent(false)
+    // Delay closing to allow exit animation
+    setTimeout(() => {
+      if (onClose) {
+        onClose()
+      }
+    }, 300)
   }
 
   // Prevent closing when in progress
@@ -175,17 +146,13 @@ 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={dialogClasses}
+      className={`progress-dialog-overlay ${showContent ? 'visible' : ''}`}
       onClick={handleOverlayClick}
     >
       <div
-        className={contentClasses}
+        className={`progress-dialog ${showInstructions ? 'with-instructions' : ''} ${showContent ? 'dialog-visible' : ''}`}
       >
         <h3>{title}</h3>
         <p>{message}</p>
@@ -239,4 +206,4 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   )
 }
 
-export default ProgressDialog
+export default ProgressDialog