[UX] Wait until winetricks lists before allowing the user to search (#…

…4226)
Heroic-Games-Launcher · Jan 2, 2025 · 20768ea · 20768ea
1 parent b534c07
commit 20768ea
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -919,6 +919,8 @@
         "installed": "Installed components:",
         "installing": "Installation in progress: {{component}}",
         "loading": "Loading",
+        "loading-available": "Loading available components ...",
+        "no-components": "No available components",
         "nothingYet": "Nothing was installed by Winetricks yet",
         "openGUI": "Open Winetricks GUI",
         "search": "Search fonts or components"

diff --git a/src/frontend/components/UI/Winetricks/index.tsx b/src/frontend/components/UI/Winetricks/index.tsx
@@ -15,12 +15,13 @@ export default function Winetricks({ onClose, runner }: Props) {
   const { appName } = useContext(SettingsContext)
   const { t } = useTranslation()
 
-  const [loading, setLoading] = useState(true)
+  const [loadingInstalled, setLoadingInstalled] = useState(true)
+  const [loadingAvailable, setLoadingAvailable] = useState(true)
 
   // keep track of all installed components for a game/app
   const [installed, setInstalled] = useState<string[]>([])
   async function listInstalled() {
-    setLoading(true)
+    setLoadingInstalled(true)
     try {
       const components = await window.api.winetricksListInstalled(
         runner,
@@ -30,7 +31,7 @@ export default function Winetricks({ onClose, runner }: Props) {
     } catch {
       setInstalled([])
     }
-    setLoading(false)
+    setLoadingInstalled(false)
   }
   useEffect(() => {
     listInstalled()
@@ -39,6 +40,7 @@ export default function Winetricks({ onClose, runner }: Props) {
   const [allComponents, setAllComponents] = useState<string[]>([])
   useEffect(() => {
     async function listComponents() {
+      setLoadingAvailable(true)
       try {
         const components = await window.api.winetricksListAvailable(
           runner,
@@ -48,7 +50,9 @@ export default function Winetricks({ onClose, runner }: Props) {
       } catch {
         setAllComponents([])
       }
+      setLoadingAvailable(false)
     }
+
     listComponents()
   }, [])
 
@@ -108,9 +112,9 @@ export default function Winetricks({ onClose, runner }: Props) {
 
   const dialogContent = (
     <>
-      {!loading && (
+      {!loadingInstalled && (
         <div className="installWrapper">
-          {!installing && (
+          {!installing && allComponents.length !== 0 && (
             <div className="actions">
               <WinetricksSearchBar
                 allComponents={allComponents}
@@ -126,6 +130,19 @@ export default function Winetricks({ onClose, runner }: Props) {
               </button>
             </div>
           )}
+          {loadingAvailable && (
+            <span>
+              {t(
+                'winetricks.loading-available',
+                'Loading available components ...'
+              )}
+            </span>
+          )}
+          {!loadingAvailable && allComponents.length === 0 && (
+            <span>
+              {t('winetricks.no-components', 'No available components')}
+            </span>
+          )}
           {installing && (
             <p>
               {t(
@@ -140,16 +157,16 @@ export default function Winetricks({ onClose, runner }: Props) {
 
       <div className="installedWrapper">
         <b>{t('winetricks.installed', 'Installed components:')}</b>
-        {loading && <span>{t('winetricks.loading', 'Loading')}</span>}
-        {!loading && installed.length === 0 && (
+        {loadingInstalled && <span>{t('winetricks.loading', 'Loading')}</span>}
+        {!loadingInstalled && installed.length === 0 && (
           <span>
             {t(
               'winetricks.nothingYet',
               'Nothing was installed by Winetricks yet'
             )}
           </span>
         )}
-        {!loading && <span>{installed.join(', ')}</span>}
+        {!loadingInstalled && <span>{installed.join(', ')}</span>}
       </div>
     </>
   )