fix(website): missing suspense

Author: eliandoran

apps/website/src/components/Header.tsx

@@ -11,6 +11,7 @@ import menuIcon from "../assets/boxicons/bx-menu.svg?raw";
 import { LocaleContext } from "..";
 import { useTranslation } from "react-i18next";
 import { swapLocaleInUrl } from "../i18n";
+import { Suspense } from "preact/compat";
 
 interface HeaderLink {
     url: string;
@@ -78,7 +79,9 @@ export function Header(props: {repoStargazersCount: number}) {
                     />
                 </div>
 
-                <DownloadButton />
+                <Suspense fallback={<div class="loading-screen">Loading...</div>}>
+                    <DownloadButton />
+                </Suspense>
 
             </div>
 		</header>

apps/website/src/index.tsx

@@ -13,30 +13,33 @@ import { default as i18next, changeLanguage } from 'i18next';
 import { extractLocaleFromUrl, LOCALES, mapLocale } from './i18n';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from "react-i18next";
+import { Suspense } from 'preact/compat';
 
 export const LocaleContext = createContext('en');
 
 export function App(props: {repoStargazersCount: number}) {
 	return (
-		<LocationProvider>
-            <LocaleProvider>
-                <Header repoStargazersCount={props.repoStargazersCount} />
-                <main>
-                    <Router>
-                        <Route path="/" component={Home} />
-                        <Route path="/get-started" component={GetStarted} />
-                        <Route path="/support-us" component={SupportUs} />
+        <LocationProvider>
+                <LocaleProvider>
+                    <Suspense fallback={<div class="loading-screen">Loading...</div>}>
+                        <Header repoStargazersCount={props.repoStargazersCount} />
+                        <main>
+                            <Router>
+                                <Route path="/" component={Home} />
+                                <Route path="/get-started" component={GetStarted} />
+                                <Route path="/support-us" component={SupportUs} />
 
-                        <Route path="/:locale:/" component={Home} />
-                        <Route path="/:locale:/get-started" component={GetStarted} />
-                        <Route path="/:locale:/support-us" component={SupportUs} />
+                                <Route path="/:locale:/" component={Home} />
+                                <Route path="/:locale:/get-started" component={GetStarted} />
+                                <Route path="/:locale:/support-us" component={SupportUs} />
 
-                        <Route default component={NotFound} />
-                    </Router>
-                </main>
-                <Footer />
-            </LocaleProvider>
-		</LocationProvider>
+                                <Route default component={NotFound} />
+                            </Router>
+                        </main>
+                        <Footer />
+                    </Suspense>
+                </LocaleProvider>
+            </LocationProvider>
 	);
 }
 

apps/website/src/pages/Home/index.tsx

@@ -33,6 +33,7 @@ import presentationIcon from "../../assets/boxicons/bx-slideshow.svg?raw";
 import { getPlatform } from '../../download-helper.js';
 import { useEffect, useState } from 'preact/hooks';
 import { Trans, useTranslation } from 'react-i18next';
+import { Suspense } from 'preact/compat';
 
 export function Home() {
     usePageTitle("");
@@ -79,7 +80,9 @@ function HeroSection() {
                 <p>{t("hero_section.subtitle")}</p>
 
                 <div className="download-wrapper">
-                    <DownloadButton big />
+                    <Suspense fallback={<div class="loading-screen">Loading...</div>}>
+                        <DownloadButton big />
+                    </Suspense>
                     <Button href="./get-started/" className="mobile-only" text={t("hero_section.get_started")} />
                     <div className="additional-options">
                         <Button iconSvg={gitHubIcon} outline text={t("hero_section.github")} href="https://github.com/TriliumNext/Trilium/" openExternally />