Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Neue] Parallel font loading on web #5411

Merged
merged 5 commits into from
Sep 19, 2024
Merged

[Neue] Parallel font loading on web #5411

merged 5 commits into from
Sep 19, 2024

Conversation

estrattonbailey
Copy link
Member

@estrattonbailey estrattonbailey commented Sep 19, 2024 •
edited
Loading

Expo statically extract font files specified in useFonts calls at build time, but font actually begin loading when useFonts is called. This means the entire JS bundle (4.2MB) has to load first, before we can load fonts.

This PR takes advantage of the static exporting, but manually loads the fonts using the DOM font API. This way, fonts are loaded parallel to the JS bundle. When the bundle boots up, we resolve document.fonts.ready, which resolves immediately if fonts are already loaded, or waits for them to load before we show the app.

The URLs of these fonts are hard-coded, but that's OK because they're content hashed. The hashes won't change unless the contents of the font files themselves change.

As before, on native, none of this is necessary and expo-font does all this for us.

Peep the waterfall in the deployment: https://social-app-pr-5411.onrender.com/

@estrattonbailey
Parallel font loading
a6ea8fb 
(cherry picked from commit 10e2b05)
@arcalinea arcalinea temporarily deployed to neue/font-loading - social-app PR #5411 September 19, 2024 00:47 — with Render Destroyed
@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 19, 2024 •
edited
Loading

Old size New size Diff
13.91 MB 13.91 MB 0 B (0.00%)

@estrattonbailey estrattonbailey mentioned this pull request Sep 19, 2024
Merged
@arcalinea arcalinea temporarily deployed to neue/font-loading - social-app PR #5411 September 19, 2024 22:13 — with Render Destroyed
@estrattonbailey
Merge remote-tracking branch 'origin/main' into neue/font-loading
a55d366 
* origin/main:
  Adjust toggle components sizing (#5408)
  [Neue] Copy and spacing tweaks (#5428)
  [Neue] Ligatures & composer (#5427)
  Remove expo/vector-icons from EditImage modal (#5422)
  Revert provider stacking changes (#5423)
  Fix ext embeds in DMs (#5419)
  Fix font loading on web (#5412)
@estrattonbailey
Cache fonts for a year
e0ef3d3
@arcalinea arcalinea temporarily deployed to neue/font-loading - social-app PR #5411 September 19, 2024 22:27 — with Render Destroyed
@estrattonbailey estrattonbailey merged commit 22410a3 into main Sep 19, 2024
6 checks passed
estrattonbailey added a commit that referenced this pull request Sep 20, 2024
@estrattonbailey
Merge remote-tracking branch 'origin/main' into mod-auth
4d4a092 
* origin/main: (21 commits)
  Add border to menu on web (#5439)
  Add eslint rule to fix imports without the `#/` path alias (#5175)
  [Neue] Parallel font loading on web (#5411)
  Adjust toggle components sizing (#5408)
  [Neue] Copy and spacing tweaks (#5428)
  [Neue] Ligatures & composer (#5427)
  Remove expo/vector-icons from EditImage modal (#5422)
  Revert provider stacking changes (#5423)
  Fix ext embeds in DMs (#5419)
  Fix font loading on web (#5412)
  [Neue] Base (#5395)
  Update sentry sourcemaps upload (#5409)
  Fix for undefined ref on hot reload on web (#5407)
  remove expo-sentry (#5405)
  Revert unneeded changes to `expo-modules-core` patch (#5393)
  Temporary Sentry hack patch for iOS 18 (#5400)
  Make it work with Xcode 16 (#5386)
  Fix border radius on avatars (#5392)
  Make like animation on web same speed as mobile (#5391)
  Pre-fill alt text with 10-million card post (#5389)
  ...
Aeroxander added a commit to creaton-io/social-app that referenced this pull request Sep 22, 2024
@Aeroxander @mozzius
@haileyok @Gargaj @0xEDU @estrattonbailey @quiple @gaearon @wscld @pfrazee @vinifsouza @joao3g @surfdude29 @hfvmarques @arthurtavaresdev @Signez @auroursa @cirx1e @KuwaLee @tkusano @ivanbea @rortan134 @kscanne @clavin @knotbin @futurGH
Sync pr (#2)
59c01a6 
* remove scrollbar-gutter in fullscreen (bluesky-social#5258)

* [Video] make hover state stick around if tapped (bluesky-social#5259)

* increase target area of scrubber (bluesky-social#5265)

* hls buffering tweaks (bluesky-social#5266)

* disable autoplay within messages and trim feelers (bluesky-social#5260)

* [Video] TEMP disable skip compression (bluesky-social#5271)

* [Video] Cap duration (bluesky-social#5270)

* fix min size for compression (bluesky-social#5272)

* add (bluesky-social#5273)

* [Video] Fix web autoplay (bluesky-social#5274)

* make container relative (bluesky-social#5280)

* remove double closing tag (bluesky-social#5257)

* Add autoCapitalize to password field (bluesky-social#5216)

* NUX API (bluesky-social#5278)

* Set up nux API

* Bump SDK

* Naming

* Imports

* WIP

* Progress on desktoip

* WIP, avi not working on web

* Disable avi

* Add badges, clean up spacing

* Copy

* Don't open for logged out users

* Hook up data

* Rename

* Refactor, integrate nux, snoozing

* Fix some nux types

* Dev helpers, string cleanup

* Protect against 3p PDSs and bad responses

* Protect against other exit methods, protect against multiple fetches

* Copy

* [Video] speculative .vtt file selection fix (bluesky-social#5296)

* speculative vtt fix

* add logging

* Tabular numbers to video timestamp (bluesky-social#5293)

* Fix notification scroll jump (bluesky-social#5297)

* Renaming the Follow button to "Follow back" when followed by user (bluesky-social#5281)

* Renaming the follow button to follow back when followed by user

* Fixing conditions and reusing existing translation

* Revert "Show some known OP replies in Following (bluesky-social#5049)" (bluesky-social#5301)

This reverts commit bff6aed.

* Add a hard-coded redirect for lulaoficial.bsky.social (bluesky-social#5303)

* Add gate

* Ensure dialog shows for all accounts without snoozing

* Add retry

* Handle overflow of bottom text

* Handle display name

* On android, change ten milly nux secondary action to save instead of share

* Add ja and pt-BR translations

* Suggested follows by actor (on profiles) updates (bluesky-social#5243)

* If fallback, return nothing

* Compress size a bit

* Hide on own profile

* Match load state

* Remove gcTime

* Filter out followed users

* Feedback

* Adjust image sizing (bluesky-social#5302)

* Enable video_upload gate (bluesky-social#5311)

* Fallback snoozing

* Let display name wrap

* Separate alt/crop, use new icon (bluesky-social#5321)

* Fix notification->post jump for real (bluesky-social#5314)

* Revert "Fix notification scroll jump (bluesky-social#5297)"

This reverts commit e0d9e75.

* Query notifications first

* Image/video border + tweaks (bluesky-social#5324)

* Image/video border (bluesky-social#5253)

* Update AutoSizedImage.tsx

* Update AutoSizedImage.tsx

* Update Gallery.tsx

* Update ExternalLinkEmbed.tsx

* Update MediaPreview.tsx

* Update UserAvatar.tsx

* Update ExternalLinkEmbed.tsx

* Update ExternalPlayerEmbed.tsx

* Update ExternalGifEmbed.tsx

* Update GifEmbed.tsx

* Update ExternalGifEmbed.tsx

* Update GifEmbed.tsx

* Update UserAvatar.tsx

* Update ExternalPlayerEmbed.tsx

* Update ExternalPlayerEmbed.tsx

* video

* Update QuoteEmbed.tsx

* Tweaks, abstract components

---------

Co-authored-by: Minseo Lee <[email protected]>

* Add events

* Disable pointer events on media border (bluesky-social#5327)

* [Video] Remove `expo-video`, use `bluesky-video` (bluesky-social#5282)

Co-authored-by: Samuel Newman <[email protected]>

* Fix lexicon validation in PWI Discover (bluesky-social#5329)

* [Video] Remember mute state while scrolling (bluesky-social#5331)

* [Video] Don't require email verification on self-host (bluesky-social#5332)

* Always display next button on login page (bluesky-social#5326)

Co-authored-by: Vinícius Souza <[email protected]>
Co-authored-by: Hailey <[email protected]>

* Apply Following settings to Lists (bluesky-social#5313)

* Apply Following settings to Lists

* Remove dead code

* [Video] Bump video (bluesky-social#5333)

* "N" keyboard shortcut to open a new post modal (bluesky-social#5197)

* feat: Add hook on web app to open composer with 'N' keyboard shortcut

* Extract, don't fire open composer if already open

* Ignore interactive elements

---------

Co-authored-by: João Gabriel <[email protected]>
Co-authored-by: Hailey <[email protected]>

* Don't open composer via hotkey if other dialog is already open (bluesky-social#5334)

* Don't open composer via hotkey if other dialog is already open

* Check for lightbox also

* Check for drawer

* [Video] Fix regression on audio session at launch (bluesky-social#5338)

* Release 1.91.1 prep (bluesky-social#5339)

* Fixes to tests

* intl extract

* bump (bluesky-social#5348)

* Add context to `Unmute` and `Mute` strings (bluesky-social#5340)

Co-authored-by: Hailey <[email protected]>

* [UITextView] Add background color support to iOS selectable text (bluesky-social#5335)

* Fix wrong empty state for liked by (bluesky-social#5343)

* Nux after onboarding (bluesky-social#5357)

* Don't show nux dialogs until post-onboarding

* Don't show if over 10M

* Disallow some font scaling

* Remove overflow hidden from external link outer el (bluesky-social#5356)

* Remove overflow hidden

* Borders when no thumb

* Fix overflow, add bg to no-thumb state

* Cleanup

* loosen checks on vtt file (bluesky-social#5359)

* [Video] Fix scrubber tap target (bluesky-social#5360)

* put padding on correct element

* clear timeout on down

* Update Portuguese localization (bluesky-social#5256)

Co-authored-by: Henrique Marques <[email protected]>
Co-authored-by: Arthur Tavares <[email protected]>

* Update French localization (bluesky-social#5227)

Co-authored-by: Stanislas Signoud <[email protected]>

* Update Chinese localization (bluesky-social#5291)

Co-authored-by: cirx <[email protected]>
Co-authored-by: Kuwa Lee <[email protected]>

* Update Korean localization (bluesky-social#5254)

* Update Japanese translation (bluesky-social#5217)

* Update catalan messages.po (bluesky-social#5223)

Co-authored-by: surfdude29 <[email protected]>
Co-authored-by: gsmt <[email protected]>

* Updates to Irish translation, back to 100% (bluesky-social#5345)

* [Video] Volume controls on web (bluesky-social#5363)

* split up VideoWebControls

* add basic slider

* logarithmic volume

* integrate mute state

* fix typo

* shared video volume

* rm log

* animate in/out

* disable for touch devices

* remove flicker on touch devices

* more detailed comment

* move into correct context provider

* add minHeight

* hack

* bettern umber

---------

Co-authored-by: Hailey <[email protected]>

* [Video] Fix safari showing spinner (bluesky-social#5364)

* Milly tweaks (bluesky-social#5365)

Co-authored-by: Hailey <[email protected]>

* [Video] Additional android fixes (bluesky-social#5373)

* rm unused code

* bump lib

* invert bool

* Bump 1.91.2 (bluesky-social#5387)

* Tweak `pt-BR` string (bluesky-social#5372)

* Pre-fill alt text with 10-million card post (bluesky-social#5389)

* Pre-fill alt text with 10-million card post (bluesky-social#5377)

* Clean up type

* Tweak alt copy

* Add pt translation, fix typo

---------

Co-authored-by: Calvin <[email protected]>

* Make like animation on web same speed as mobile (bluesky-social#5391)

* Fix border radius on avatars (bluesky-social#5392)

* Make it work with Xcode 16 (bluesky-social#5386)

* Temporary Sentry hack patch for iOS 18 (bluesky-social#5400)

* Revert unneeded changes to `expo-modules-core` patch (bluesky-social#5393)

* remove expo-sentry (bluesky-social#5405)

* Fix for undefined ref on hot reload on web (bluesky-social#5407)

* Update sentry sourcemaps upload (bluesky-social#5409)

* [Neue] Base (bluesky-social#5395)

* Add fontScale, gate it, fix some computes

* Add inter, integrate

* Clean up

* Apply to old Text component

* Use numeric weight

* Cleanup

* Clean up appearance settings

* Global tracking

* Fix regular italic variant

* Refactor settings and fontScale values

* Remove flags

* Get rid of lower weight font usage

* Remove gate from settings

* Refactor appearance settings for reuse

* Add neue type nux

* Update defaults

* Load fonts, add fallback families

* Load fonts via plugin in production

* Fixes

* Fix for web

* Nits

---------

Co-authored-by: Hailey <[email protected]>

* Fix font loading on web (bluesky-social#5412)

* Copy font files during build

* Fall back if error loading fonts

* Fix ext embeds in DMs (bluesky-social#5419)

* fix ext embeds in DMs

* undo acciental rounding change

* Revert provider stacking changes (bluesky-social#5423)

* Remove expo/vector-icons from EditImage modal (bluesky-social#5422)

* [Neue] Ligatures & composer (bluesky-social#5427)

* Disable contextual ligatures

* Ensure new type styles are applied to the composer

* Clean up using real devices

* Feedback

* [Neue] Copy and spacing tweaks (bluesky-social#5428)

* Copy and spacing tweaks

* Copy tweaks

* Adjust toggle components sizing (bluesky-social#5408)

(cherry picked from commit a9cbd23)

* [Neue] Parallel font loading on web (bluesky-social#5411)

* Parallel font loading

(cherry picked from commit 10e2b05)

* Handle failures

* Rely on font-face and preload tags for font loading (bluesky-social#5431)

* Cache fonts for a year

* Add eslint rule to fix imports without the `#/` path alias (bluesky-social#5175)

* Add border to menu on web (bluesky-social#5439)

* Language fixes (bluesky-social#5384)

* Add some comments

* Decouple language settings

* Normalize on read/write

* Refactor

* Support device locale on app startup

* Cleanup, port to web

* Clean up comments

* Comment

* Try not to mutate

* Protect util handling, update test

* Dedupe array values

* Add explicit non-handling of detached quotes in embed (bluesky-social#5156)

* [Neue] Buttons (bluesky-social#5406)

* Re-align button sizing

(cherry picked from commit bcec243)

* Use large, small, tiny

(cherry picked from commit 1dc333c)

* Tweaks

* patch expo modules again (bluesky-social#5441)

* Additional moderation (bluesky-social#5172)

* Set up additional mod authorities

* Filter out non-configurable mod authorities

* WIP

* Working

* Cleanup, add mod

* Cleanup

* Add more debug logs

* Tweak logs

* Filter out imperative labels from typeaheads

* Filter hideable content from notifications

* Add api

* Fall back in dev

* Remove space

* Use prod endpoint

* Add tiny notice

* Add notice to labeler card, show all labelers

* Increase rounding for all embeds (bluesky-social#5421)

* tweak image styles

* fix reply image preview and covert to atoms

* increase rounding on media inset border

* decrease gap on desktop

* fix inset styles

* increase rounding on embeds to `md`

* Couple edge cases

---------

Co-authored-by: Eric Bailey <[email protected]>

* Fixing hover card for labeler accounts (bluesky-social#5414)

* Fixing hover card for labeler account

* removing memo

* Fixing extra spacing in notification text (bluesky-social#5396)

* Validate TLD in signup (bluesky-social#5426)

* add lib

* add validation

* log

* add some common typos

* add tests

* reset hasWarned state on edit

* shorten path

* Move test file, adjust regex, add test

* Get real nit picky

---------

Co-authored-by: Eric Bailey <[email protected]>

* Fix spacing (bluesky-social#5444)

* [Neue] Font weights (bluesky-social#5442)

* Align all font weights

* Only load necessary fonts

* Also comment out from hook

---------

Co-authored-by: Samuel Newman <[email protected]>
Co-authored-by: Hailey <[email protected]>
Co-authored-by: Gargaj <[email protected]>
Co-authored-by: Eduardo Tachotte <[email protected]>
Co-authored-by: Eric Bailey <[email protected]>
Co-authored-by: Minseo Lee <[email protected]>
Co-authored-by: dan <[email protected]>
Co-authored-by: Wesley <[email protected]>
Co-authored-by: Paul Frazee <[email protected]>
Co-authored-by: Vinícius Souza <[email protected]>
Co-authored-by: João Gabriel <[email protected]>
Co-authored-by: surfdude29 <[email protected]>
Co-authored-by: Henrique Marques <[email protected]>
Co-authored-by: Arthur Tavares <[email protected]>
Co-authored-by: Stanislas Signoud <[email protected]>
Co-authored-by: Frudrax Cheng <[email protected]>
Co-authored-by: cirx <[email protected]>
Co-authored-by: Kuwa Lee <[email protected]>
Co-authored-by: Takayuki KUSANO <[email protected]>
Co-authored-by: Ivan Beà <[email protected]>
Co-authored-by: gsmt <[email protected]>
Co-authored-by: Kevin Scannell <[email protected]>
Co-authored-by: Calvin <[email protected]>
Co-authored-by: Roscoe Rubin-Rottenberg <[email protected]>
Co-authored-by: futur <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gaearon gaearon gaearon approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@estrattonbailey @gaearon @arcalinea