fix(website): missing suspense

This commit is contained in:
Elian Doran 2025-10-27 16:35:26 +02:00
parent 86aaa97809
commit dbfa94a9ee
No known key found for this signature in database
3 changed files with 28 additions and 19 deletions

View File

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

View File

@ -13,6 +13,7 @@ import { default as i18next, changeLanguage } from 'i18next';
import { extractLocaleFromUrl, LOCALES, mapLocale } from './i18n'; import { extractLocaleFromUrl, LOCALES, mapLocale } from './i18n';
import HttpApi from 'i18next-http-backend'; import HttpApi from 'i18next-http-backend';
import { initReactI18next } from "react-i18next"; import { initReactI18next } from "react-i18next";
import { Suspense } from 'preact/compat';
export const LocaleContext = createContext('en'); export const LocaleContext = createContext('en');
@ -20,6 +21,7 @@ export function App(props: {repoStargazersCount: number}) {
return ( return (
<LocationProvider> <LocationProvider>
<LocaleProvider> <LocaleProvider>
<Suspense fallback={<div class="loading-screen">Loading...</div>}>
<Header repoStargazersCount={props.repoStargazersCount} /> <Header repoStargazersCount={props.repoStargazersCount} />
<main> <main>
<Router> <Router>
@ -35,6 +37,7 @@ export function App(props: {repoStargazersCount: number}) {
</Router> </Router>
</main> </main>
<Footer /> <Footer />
</Suspense>
</LocaleProvider> </LocaleProvider>
</LocationProvider> </LocationProvider>
); );

View File

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