Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#324 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
build-system, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
9
Fork
3
Merge trung bình
6 ngày 7 giờ
Pull request đã merge (30 ngày)
20

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của DiamondLightSource/sci-react-ui

Tất cả issue của DiamondLightSource/sci-react-ui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.