diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index bcb00e5413901f1cee4e1f83f421fd18c948d081..4d7147947950bf79604d8981579159b0e015563d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, Suspense } from 'react'; import { useTranslation } from 'react-i18next'; import './App.css'; @@ -31,41 +31,48 @@ const App = () => { } return ( - <div className="App"> - <header className="App-header"> - <Button href="https://example.com" target="_blank" rel="noopener"> - Knapp - </Button> - <Button href="https://example.com" target="_blank" rel="noopener" pink> - Rosa knapp - </Button> + <Suspense fallback="loading"> + <div className="App"> + <header className="App-header"> + <Button href="https://example.com" target="_blank" rel="noopener"> + Knapp + </Button> + <Button + href="https://example.com" + target="_blank" + rel="noopener" + pink + > + Rosa knapp + </Button> - <p>{t('common:test')}</p> - <p>{t('common:nested.test')}</p> - <p>{t('footer:footerInfo')}</p> + <p>{t('common:test')}</p> + <p>{t('common:nested.test')}</p> + <p>{t('footer:footerInfo')}</p> - <Button - onClick={() => - i18n.language === 'en' - ? i18n.changeLanguage('nb') - : i18n.changeLanguage('en') - } - > - {t('common:language.change', { - lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk', - })} - </Button> - <p> - Version {appVersion} - <br /> - Timezone {appTimezone} - <br /> - Theme {appTheme} - <br /> - API reachable? {apiHealth} - </p> - </header> - </div> + <Button + onClick={() => + i18n.language === 'en' + ? i18n.changeLanguage('nb') + : i18n.changeLanguage('en') + } + > + {t('common:language.change', { + lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk', + })} + </Button> + <p> + Version {appVersion} + <br /> + Timezone {appTimezone} + <br /> + Theme {appTheme} + <br /> + API reachable? {apiHealth} + </p> + </header> + </div> + </Suspense> ); };