Broken animation changes but ill fix it

src/App.tsx

@@ -137,31 +137,29 @@ function App() {
               instructions?: InstructionInfo
             }
         
-          if (complete && !show_instructions) {
+          // Always update progress dialog
-            // Hide dialog when complete if no instructions
+          setProgressDialog({
-            setTimeout(() => {
+            visible: true, // Always set to visible - our ProgressDialog component handles exit animation
-              setProgressDialog((prev) => ({ ...prev, visible: false }))
+            title,
+            message,
+            progress,
+            showInstructions: show_instructions || false,
+            instructions,
+          })
           
-              // Only refresh games list if dialog is closing without instructions
+          // If complete and no instructions, we need to schedule a game list refresh
-              if (!refreshInProgress.current) {
+          // The dialog will auto-close with animation, but we still need to refresh the games
-                refreshInProgress.current = true
+          if (complete && !show_instructions) {
-                setTimeout(() => {
+            // Schedule a refresh for after the dialog closes
-                  loadGames().then(() => {
+            if (!refreshInProgress.current) {
-                    refreshInProgress.current = false
+              refreshInProgress.current = true
-                  })
+              // Wait for dialog animation + close delay (about 1.2s total)
-                }, 100)
+              setTimeout(() => {
-              }
+                loadGames().then(() => {
-            }, 1000)
+                  refreshInProgress.current = false
-          } else {
+                })
-            // Update progress dialog
+              }, 1300)
-            setProgressDialog({
+            }
-              visible: true,
-              title,
-              message,
-              progress,
-              showInstructions: show_instructions || false,
-              instructions,
-            })
           }
         })
 
@@ -379,7 +377,7 @@ function App() {
   }, [])
 
   const handleCloseProgressDialog = () => {
-    // Just hide the dialog without refreshing game list
+    // Set dialog to not visible - animation is handled by the component
     setProgressDialog((prev) => ({ ...prev, visible: false }))
   
     // Only refresh if we need to (instructions didn't trigger update)
@@ -667,13 +665,14 @@ function App() {
       dlcFetchController.current = null
     }
   
-    // Close dialog
+    // Close dialog - animation is handled in DlcSelectionDialog
     setDlcDialog((prev) => ({ ...prev, visible: false }))
   }
 
   // Handle DLC selection confirmation
   const handleDlcConfirm = async (selectedDlcs: DlcInfo[]) => {
-    // Close the dialog first
+    // The dialog has already started its exit animation
+    // Just make sure it's marked as invisible
     setDlcDialog((prev) => ({ ...prev, visible: false }))
   
     const gameId = dlcDialog.gameId
@@ -712,9 +711,11 @@ function App() {
           progress: 100,
         }))
   
-        // Hide dialog after a delay
+        // The ProgressDialog component will now handle the exit animation
+        // when progress reaches 100% after a delay
+        
+        // But we still need to reset installing state with a delay
         setTimeout(() => {
-          setProgressDialog((prev) => ({ ...prev, visible: false }))
           // Reset installing state
           setGames((prevGames) =>
             prevGames.map((g) => (g.id === gameId ? { ...g, installing: false } : g))
@@ -759,10 +760,7 @@ function App() {
         prevGames.map((g) => (g.id === gameId ? { ...g, installing: false } : g))
       )
   
-      // Hide dialog after a delay
+      // ProgressDialog will handle exit animation automatically
-      setTimeout(() => {
-        setProgressDialog((prev) => ({ ...prev, visible: false }))
-      }, 3000)
     }
   }
 

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) {
+    // Only respond to actual changes in visibility
-      // Show content immediately for better UX
+    if (visible !== prevVisible) {
-      const timer = setTimeout(() => {
+      if (visible) {
-        setShowContent(true)
+        // Show animation
-      }, 50)
+        setAnimationState('visible')
-      return () => clearTimeout(timer)
+      } else {
-    } else {
+        // Hide animation - but only if we're currently visible
-      setShowContent(false)
+        if (animationState === 'visible') {
-      setInitialized(false) // Reset initialized state when dialog closes
+          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

src/components/ProgressDialog.tsx

@@ -27,23 +27,55 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   onClose,
 }) => {
   const [copySuccess, setCopySuccess] = useState(false)
-  const [showContent, setShowContent] = 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)
   
-  // Reset copy state when dialog visibility changes
+  // Handle animations on visibility changes
   useEffect(() => {
-    if (!visible) {
+    // Only respond to actual changes in visibility
-      setCopySuccess(false)
+    if (visible !== prevVisible) {
-      setShowContent(false)
+      if (visible) {
-    } else {
+        // Show animation
-      // Add a small delay to trigger the entrance 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)
+        // Only proceed if we're still in visible state
-      }, 50)
+        if (animationState === 'visible' && onClose) {
+          onClose() // Call the onClose function directly
+        }
+      }, 1000) // Wait 1 second after completion
+      
       return () => clearTimeout(timer)
     }
-  }, [visible])
+  }, [progress, showInstructions, animationState, visible, onClose])
   
-  if (!visible) return null
+  // Don't render if state is closed
+  if (animationState === 'closed') {
+    return null
+  }
   
   const handleCopyCommand = () => {
     if (instructions?.command) {
@@ -58,13 +90,10 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
   }
 
   const handleClose = () => {
-    setShowContent(false)
+    // If we can close, just call onClose directly
-    // Delay closing to allow exit animation
+    if (onClose) {
-    setTimeout(() => {
+      onClose()
-      if (onClose) {
+    }
-        onClose()
-      }
-    }, 300)
   }
 
   // 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>

src/styles/components/_dialog.scss

@@ -1,6 +1,29 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
+// Shared keyframes for both enter and exit animations
+@keyframes modal-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-disappear {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
 // Progress Dialog
 .progress-dialog-overlay {
   position: fixed;
@@ -13,22 +36,19 @@
   @include flex-center;
   z-index: var(--z-modal);
   opacity: 0;
-  animation: modal-appear 0.2s ease-out;
   cursor: pointer;
+  pointer-events: auto; // Ensure clicks work
 
+  // When visible, fade in
   &.visible {
     opacity: 1;
+    animation: modal-appear 0.2s ease-out forwards;
   }
 
-  @keyframes modal-appear {
+  // When exiting, fade out
-    0% {
+  &.exiting {
-      opacity: 0;
+    animation: modal-disappear 0.2s ease-out forwards;
-      transform: scale(0.95);
+    pointer-events: none; // Prevent clicks during exit animation
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
   }
 }
 
@@ -36,32 +56,31 @@
   background-color: var(--elevated-bg);
   border-radius: 8px;
   padding: 1.5rem;
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); // shadow-glow
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
   width: 450px;
   max-width: 90vw;
   border: 1px solid var(--border-soft);
   opacity: 0;
+  transform: scale(0.95);
   cursor: default;
 
+  // When visible, show the dialog
   &.dialog-visible {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
+    transition: transform 0.2s var(--easing-bounce), opacity 0.2s ease-out;
+  }
+
+  // When exiting, hide the dialog
+  &.dialog-exiting {
+    opacity: 0;
+    transform: scale(0.95);
+    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
   }
 
   &.with-instructions {
     width: 500px;
   }
-
-  h3 {
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--text-primary);
-  }
-
-  p {
-    margin-bottom: 1rem;
-    color: var(--text-secondary);
-  }
 }
 
 // Progress bar

src/styles/components/_dlc_dialog.scss

@@ -13,10 +13,18 @@
   z-index: var(--z-modal);
   opacity: 0;
   cursor: pointer;
+  pointer-events: auto; // Ensure clicks work
 
+  // When visible, fade in
   &.visible {
     opacity: 1;
-    animation: modal-appear 0.2s ease-out;
+    animation: modal-appear 0.2s ease-out forwards;
+  }
+
+  // When exiting, fade out
+  &.exiting {
+    animation: modal-disappear 0.2s ease-out forwards;
+    pointer-events: none; // Prevent clicks during exit animation
   }
 }
 
@@ -34,12 +42,18 @@
   opacity: 0;
   transform: scale(0.95);
 
+  // When visible, show the dialog
   &.dialog-visible {
-    transform: scale(1);
     opacity: 1;
-    transition:
+    transform: scale(1);
-      transform 0.2s var(--easing-bounce),
+    transition: transform 0.2s var(--easing-bounce), opacity 0.2s ease-out;
-      opacity 0.2s ease-out;
+  }
+
+  // When exiting, hide the dialog
+  &.dialog-exiting {
+    opacity: 0;
+    transform: scale(0.95);
+    transition: transform 0.2s ease-in, opacity 0.2s ease-in;
   }
 }