Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: facebook/react
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: f1222f76
Choose a base ref
...
head repository: facebook/react
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 534bed5f
Choose a head ref
  • 5 commits
  • 14 files changed
  • 2 contributors

Commits on Aug 13, 2025

  1. [DevTools] Use Visually Lighter Skeletons (#34185) 

    The skeletons right now are too jarring because they're visually heavier
than the content that comes in later. This makes them draw attention to
themselves as flashing things.

A good skeleton and loading indicator should ideally start as invisible
as possible and then gradually become more visible the longer time
passes so that if it loads quickly then it was never much visible at
all.

Even at its max it should never be heavier weight than the final content
so that it visually reverts into lesser. Another rule of thumb is that
it should be as close as possible to the final content in size but if
it's unknown it should always be smaller than the final content so that
the content grows into its slot rather than the slot contracting.

This makes the skeleton fade from invisible into the dimmest color just
as a subtle hint that something is still loading.

I also added a missing skeleton since the stack traces in rendered by
can now suspend while source mapping.

The other tweak I did is use disabled buttons in all the cases where we
load the ability to enable a button. This is more subtle and if you
hover over you can see why it's still disabled. Rather than flashing the
button each time you change element.
    @sebmarkbage
    sebmarkbage authored Aug 13, 2025
    Configuration menu
    Copy the full SHA
    14c50e3 View commit details
    Browse the repository at this point in the history

  2. [Flight] Log error if prod elements are rendered (#34189)

    @eps1lon
    eps1lon authored Aug 13, 2025
    Configuration menu
    Copy the full SHA
    0032b2a View commit details
    Browse the repository at this point in the history

  3. Fail tests if unasserted console calls contain undefined (#34191)

    @eps1lon
    eps1lon authored Aug 13, 2025
    Configuration menu
    Copy the full SHA
    9433fe3 View commit details
    Browse the repository at this point in the history

  4. [DevTools] Track virtual debug info from suspensey images (#34181) 

    Same as #34166 but for Suspensey images.

The trick here is to check the `SuspenseyImagesMode` since not all
versions of React and not all subtrees will have Suspensey images
enabled yet.

The other trick is to read back from `currentSrc` to get the image url
we actually resolved to in this case. Similar to how for Suspensey CSS
we check if the media query would've matched.

<img width="591" height="205" alt="Screenshot 2025-08-11 at 9 32 56 PM"
src="https://github.com/user-attachments/assets/ac98785c-d3e0-407c-84e0-c27f86c0ecac"
/>
    @sebmarkbage
    sebmarkbage authored Aug 13, 2025
    Configuration menu
    Copy the full SHA
    db06f6b View commit details
    Browse the repository at this point in the history

  5. Use yarn run in Flight fixture (#34197)

    @eps1lon
    eps1lon authored Aug 13, 2025
    Configuration menu
    Copy the full SHA
    534bed5 View commit details
    Browse the repository at this point in the history
Loading