Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#324 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 2 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
55/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react, typescript
Domaine
build-system, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

needs-triage

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.

Langage dominant
TypeScript
Étoiles
9
Forks
3
Merge moyen
6 j 7 h
PR mergées (30 j)
20

Préparer son environnement

Ouvrir dans Codespaces

Lance le conteneur de développement du projet dans votre navigateur, avec votre propre compte GitHub.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de DiamondLightSource/sci-react-ui

Toutes les issues de DiamondLightSource/sci-react-ui

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.