Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

SSR font flicker caused by design-system styles loading after the initial render

Offen
  • Stimmt etwas nicht?
#324 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
55/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
build-system, frontend

Rechercherichtung

Start by tracing how DiamondDSTokens.css and DiamondDSTypography.css are injected with style-inject, then compare that path with the existing font-styles.css pattern and the package imports shown in the issue. Check the package's SSR behavior with MUI and Emotion. Done means token and typography variables are available before the first paint without relying on browser-only injection.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

needs-triage

Bug Report

Summary

SciReactUI 0.7.1 addressed font-loading issues in some applications by externalising the font CSS. However, this revealed a separate issue affecting server-side rendering.

In SSR applications such as EVO, DiamondDS tokens and typography variables are unavailable during the initial render. This can cause text to appear briefly in a fallback serif font before switching to Inter or another configured typeface. Other token-dependent styles may also change after the initial render, although these changes are likely to be less noticeable.

Expected behaviour

Design-system tokens and typography styles should be available before the first paint.

Actual behaviour

DiamondDSTokens.css and DiamondDSTypography.css are injected in the browser using style-inject.

Because style-inject does not run on the server, variables such as --ds-font-family-default are initially undefined. They become available only after the application renders, causing a visible font change.

The application’s MUI and Emotion SSR configuration works correctly for styles generated through Emotion. It cannot collect these separate CSS files.

See MUI's SSR guide for an explanation of its server-rendering mechanism.

Environment

  • Package version: @diamondlightsource/[email protected]
  • Browser: Any modern browser
  • OS: Any
  • App or framework environment: Server-side rendered React application using MUI and Emotion

Additional context

A temporary consumer workaround is to define the font variables in server-rendered global CSS:

:root {
  --ds-font-family-default: "Inter Variable", system-ui, sans-serif;
  --ds-font-family-display:
    "Outfit Variable", "Inter Variable", system-ui, sans-serif;
  --ds-font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
}

A possible package fix is to publish the design tokens and typography rules as a static CSS export, following the existing font-styles.css pattern:

import '@diamondlightsource/sci-react-ui/font-styles.css';
import '@diamondlightsource/sci-react-ui/styles.css';

This would allow the consuming framework to include the styles before first paint. These foundational styles would no longer need to be injected at runtime using style-inject.

We can also unify both files into a single one.

A separate font swap may still occur while the .woff2 files download because font-styles.css uses font-display: swap (better for displaying content quickly). Applications can reduce that delay by preloading fonts used above the fold.

Vorherrschende Sprache
TypeScript
Sterne
8
Forks
3
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
10

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus DiamondLightSource/sci-react-ui

Alle Issues in DiamondLightSource/sci-react-ui

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.