1 files changed, 60 insertions, 36 deletions

diff --git a/frontend/src/components/settings/pages/testing/index.tsx b/frontend/src/components/settings/pages/testing/index.tsx
index 72267295..cdf51c71 100644
--- a/frontend/src/components/settings/pages/testing/index.tsx
+++ b/frontend/src/components/settings/pages/testing/index.tsx
@@ -1,4 +1,12 @@
-import { DialogBody, DialogButton, DialogControlsSection, Focusable, Navigation } from 'decky-frontend-lib';
+import {
+  DialogBody,
+  DialogButton,
+  DialogControlsSection,
+  Field,
+  Focusable,
+  Navigation,
+  SteamSpinner,
+} from 'decky-frontend-lib';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaDownload, FaInfo } from 'react-icons/fa';
@@ -19,13 +27,23 @@ const downloadTestingVersion = DeckyBackend.callable<[pr_id: number, sha: string
 export default function TestingVersionList() {
   const { t } = useTranslation();
   const [testingVersions, setTestingVersions] = useState<TestingVersion[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     (async () => {
       setTestingVersions(await getTestingVersions());
+      setLoading(false);
     })();
   }, []);
 
+  if (loading) {
+    return (
+      <>
+        <SteamSpinner>{t('Testing.loading')}</SteamSpinner>
+      </>
+    );
+  }
+
   if (testingVersions.length === 0) {
     return (
       <div>
@@ -37,48 +55,54 @@ export default function TestingVersionList() {
   return (
     <DialogBody>
       <DialogControlsSection>
+        <h4>{t('Testing.header')}</h4>
         <ul style={{ listStyleType: 'none', padding: '0' }}>
           {testingVersions.map((version) => {
             return (
-              <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingBottom: '10px' }}>
-                <span>
-                  {version.name} <span style={{ opacity: '50%' }}>{'#' + version.id}</span>
-                </span>
-                <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
-                  <DialogButton
-                    style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
-                    onClick={() => {
-                      downloadTestingVersion(version.id, version.head_sha);
-                      setSetting('branch', UpdateBranch.Testing);
-                    }}
-                  >
-                    <div
+              <li>
+                <Field
+                  label={
+                    <>
+                      {version.name} <span style={{ opacity: '50%' }}>{'#' + version.id}</span>
+                    </>
+                  }
+                >
+                  <Focusable style={{ height: '40px', marginLeft: 'auto', display: 'flex' }}>
+                    <DialogButton
+                      style={{ height: '40px', minWidth: '60px', marginRight: '10px' }}
+                      onClick={() => {
+                        downloadTestingVersion(version.id, version.head_sha);
+                        setSetting('branch', UpdateBranch.Testing);
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: 'flex',
+                          minWidth: '150px',
+                          justifyContent: 'space-between',
+                          alignItems: 'center',
+                        }}
+                      >
+                        {t('Testing.download')}
+                        <FaDownload style={{ paddingLeft: '1rem' }} />
+                      </div>
+                    </DialogButton>
+                    <DialogButton
                       style={{
+                        height: '40px',
+                        width: '40px',
+                        padding: '10px 12px',
+                        minWidth: '40px',
                         display: 'flex',
-                        minWidth: '150px',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
                       }}
+                      onClick={() => Navigation.NavigateToExternalWeb(version.link)}
                     >
-                      {t('Testing.download')}
-                      <FaDownload style={{ paddingLeft: '1rem' }} />
-                    </div>
-                  </DialogButton>
-                  <DialogButton
-                    style={{
-                      height: '40px',
-                      width: '40px',
-                      padding: '10px 12px',
-                      minWidth: '40px',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'center',
-                    }}
-                    onClick={() => Navigation.NavigateToExternalWeb(version.link)}
-                  >
-                    <FaInfo />
-                  </DialogButton>
-                </Focusable>
+                      <FaInfo />
+                    </DialogButton>
+                  </Focusable>
+                </Field>
               </li>
             );
           })}