Merge branch 'frontend-reduce-layoutshift'

BitBoxSwiss · Feb 6, 2023 · bbd21b8 · bbd21b8
2 parents a60f3fb + 407340b
commit bbd21b8
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 42 deletions.
diff --git a/frontends/web/src/routes/device/bitbox02/settings.tsx b/frontends/web/src/routes/device/bitbox02/settings.tsx
@@ -32,6 +32,7 @@ import { alertUser } from '../../../components/alert/Alert';
 import { ManageDeviceGuide } from './settings-guide';
 import { View, ViewContent } from '../../../components/view/view';
 import { Column, Grid, GuidedContent, GuideWrapper, Header, Main } from '../../../components/layout';
+import { Skeleton } from '../../../components/skeleton/skeleton';
 
 type TProps = {
     deviceID: string;
@@ -56,9 +57,6 @@ export const Settings = ({ deviceID }: TProps) => {
     route(`/passphrase/${deviceID}`);
   };
 
-  if (deviceInfo === undefined) {
-    return null;
-  }
   return (
     <Main>
       <GuideWrapper>
@@ -77,21 +75,23 @@ export const Settings = ({ deviceID }: TProps) => {
                 </Column>
                 <Column>
                   <h3 className="subTitle">{t('deviceSettings.hardware.title')}</h3>
-                  <SetDeviceName
-                    deviceName={deviceInfo.name}
-                    deviceID={deviceID} />
-                  { deviceInfo && deviceInfo.securechipModel !== '' && (
+                  { deviceInfo ? (
+                    <SetDeviceName
+                      deviceName={deviceInfo.name}
+                      deviceID={deviceID} />
+                  ) : <Skeleton fontSize="var(--item-height)" /> }
+                  { (deviceInfo && deviceInfo.securechipModel !== '') ? (
                     <SettingsItem optionalText={deviceInfo.securechipModel}>
                       {t('deviceSettings.hardware.securechip')}
                     </SettingsItem>
-                  ) }
-                  {attestation !== null && (
+                  ) : <Skeleton fontSize="var(--item-height)" /> }
+                  { attestation !== null ? (
                     <SettingsItem
                       optionalText={t(`deviceSettings.hardware.attestation.${attestation}`)}
                       optionalIcon={attestation ? <Checked/> : <Warning/>}>
                       {t('deviceSettings.hardware.attestation.label')}
                     </SettingsItem>
-                  )}
+                  ) : <Skeleton fontSize="var(--item-height)" />}
                 </Column>
               </Grid>
               <Grid>
@@ -101,24 +101,26 @@ export const Settings = ({ deviceID }: TProps) => {
                     <UpgradeButton
                       deviceID={deviceID}
                       versionInfo={versionInfo}/>
-                  ) : versionInfo && (
+                  ) : versionInfo ? (
                     <SettingsItem
                       optionalText={versionInfo.currentVersion}
                       optionalIcon={<Checked/>}>
                       {t('deviceSettings.firmware.upToDate')}
                     </SettingsItem>
-                  )}
+                  ) : <Skeleton fontSize="var(--item-height)" />}
                 </Column>
                 <Column>
                   <h3 className="subTitle">{t('settings.expert.title')}</h3>
-                  <SettingsButton onClick={routeToPassphrase}>
-                    { deviceInfo.mnemonicPassphraseEnabled
-                      ? t('passphrase.disable')
-                      : t('passphrase.enable')}
-                  </SettingsButton>
+                  { deviceInfo ? (
+                    <SettingsButton onClick={routeToPassphrase}>
+                      { deviceInfo.mnemonicPassphraseEnabled
+                        ? t('passphrase.disable')
+                        : t('passphrase.enable')}
+                    </SettingsButton>
+                  ) : <Skeleton fontSize="var(--item-height)" /> }
                   { versionInfo && versionInfo.canGotoStartupSettings ? (
                     <GotoStartupSettings apiPrefix={apiPrefix} />
-                  ) : null }
+                  ) : <Skeleton fontSize="var(--item-height)" /> }
                 </Column>
               </Grid>
             </ViewContent>

diff --git a/frontends/web/src/routes/settings/settings.tsx b/frontends/web/src/routes/settings/settings.tsx
@@ -238,30 +238,28 @@ class Settings extends Component<Props, State> {
                             <h3 className="subTitle">{t('settings.info.title')}</h3>
                             <div className="box slim divide m-bottom-large">
                               { version !== undefined && update !== undefined ? (
-                                <div>
-                                  { update ? (
-                                    <SettingsButton
-                                      optionalText={version}
-                                      secondaryText={
-                                        <>
-                                          {t('settings.info.out-of-date')}
-                                          {' '}
-                                          <RedDot />
-                                        </>
-                                      }
-                                      disabled={false}
-                                      onClick={() => update && apiPost('open', downloadLinkByLanguage())}>
-                                      {t('settings.info.version')}
-                                    </SettingsButton>) : (
-                                    <SettingsItem
-                                      optionalText={version}
-                                      optionalIcon={<Checked/>}>
-                                      {t('settings.info.up-to-date')}
-                                    </SettingsItem>
-                                  )
-                                  }
-                                </div>
-                              ) : <Skeleton />}
+                                update ? (
+                                  <SettingsButton
+                                    optionalText={version}
+                                    secondaryText={
+                                      <>
+                                        {t('settings.info.out-of-date')}
+                                        {' '}
+                                        <RedDot />
+                                      </>
+                                    }
+                                    disabled={false}
+                                    onClick={() => update && apiPost('open', downloadLinkByLanguage())}>
+                                    {t('settings.info.version')}
+                                  </SettingsButton>
+                                ) : (
+                                  <SettingsItem
+                                    optionalText={version}
+                                    optionalIcon={<Checked/>}>
+                                    {t('settings.info.up-to-date')}
+                                  </SettingsItem>
+                                )
+                              ) : <Skeleton fontSize="var(--item-height)" />}
                             </div>
                           </div>
                           { manageAccountsLen ? (