[Storybook] Fix font-loading in Chromatic

[gwyneplaine]

WHY are these changes introduced?

Fixes #9993 (comment)
Fixes #10104

WHAT is this pull request doing?

https://shopify.chromatic.com/docs/resource-loading#solution-b-check-fonts-have-loaded-in-a-loader

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[spy-v2]

⚠️🚨⚠️ Description still needs to be filled in ⚠️🚨⚠️

Charles Lee [2023-08-10 06:32AM UTC]

Not sure if this is known, but looks like any stories with Popover components are inconsistently rendered in chromatic, which means snapshots are indeterminately changing. Something to be aware of as we're working through the v12 tickets.

see https://shopify.chromatic.com/build?appId=5d559397bae39100201eedc1&number=19008 and note that the baseline is rendering off-kilter.

🧵 Slack Thread

Slack Thread
Charles Lee [2023-08-10 06:32AM UTC] Not sure if this is known, but looks like any stories with Popover components are inconsistently rendered in chromatic, which means snapshots are indeterminately changing. Something to be aware of as we're working through the v12 tickets. see https://shopify.chromatic.com/build?appId=5d559397bae39100201eedc1&number=19008 and note that the baseline is rendering off-kilter.
Charles Lee [2023-08-10 06:35AM UTC] Looks like this may be the cause of the issue cc @jesstelford https://www.chromatic.com/docs/interactions#my-interactions-arent-getting-snapshotted-consistently-with-exte
Spy [2023-08-10 07:02AM UTC] :oops: Something went wrong, let me talk to the user for a moment... (error: add_comment did not match any of the parameters for this command)
Spy [2023-08-10 07:03AM UTC] :oops: Something went wrong, let me talk to the user for a moment... (error: comment did not match any of the parameters for this command)

---

^{Created originally at 2023-08-10 07:03AM UTC by Charles Lee}

[sophschneider]

I'm still getting the layout shift/font flash on storybook when I pulled this branch, but I think I have an alternative solution! #10048

Edit: my solution doesn't work either it just loaded the system font again :(

[sophschneider]

I debuggered in some components and they were rendering pre inter loading 🤔 I wonder if we have to check if inter is ready specifically

[jesstelford]

Might be because of the isChromatic check... I guess it makes sense to force loading Inter on local dev too, so we could remove that.

[sophschneider]

I tried removing it but it still flashes the SF font locally...
is there any way we can test that it isn't flashing on chromatic?

It might be worth merging both this approach AND #10073?

[jesstelford]

Suggested change

	import isChromatic from 'chromatic/isChromatic';
	// Use the document.fonts API to ensure fonts have fully loaded before rendering a story. Important for consistency when doing visual diffing in Chromatic.
	// See: https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts
	const fontLoader = async () => ({
	fonts: await document.fonts.ready,
	});
	// Exporting as a loader from `preview.js` forces the promise to be resolved before EVERY story
	// See: https://storybook.js.org/docs/react/writing-stories/loaders
	export const loaders = isChromatic() && document.fonts ? [fontLoader] : [];
	// Use the document.fonts API to ensure fonts have fully loaded before rendering a story. Important for consistency when doing visual diffing in Chromatic.
	// See: https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts
	const fontLoader = async () => ({
	fonts: await document.fonts.ready,
	});
	// Exporting as a loader from `preview.js` forces the promise to be resolved before EVERY story
	// See: https://storybook.js.org/docs/react/writing-stories/loaders
	export const loaders = document.fonts ? [fontLoader] : [];

Also force fonts to load on local dev, not just Chromatic.

[sophschneider]

Not sure how to test how this is working on chromatic but lets just merge it in and see what happens!

My PR #10073 gets the loading working locally and on chromatic, but as @jesstelford mentioned the google font urls could change.

I honestly think its safe for us to merge both A and B approaches from here

Edit: I tested solution A and solution B and it seems like both methods are not working in the chromatic snapshots 🤔 I agree that solution B is the best approach if we can get it to work.

I'm going to close the solution A pr for now, but maybe we should consider solution C (using system font for chromatic) if we can't get this to work

[sophschneider]

Merging this work around solution to use the system font instead until we can verify that this PR will fix the flakiness. I still like this PR's approach the best! If we can get it to work, we can revert the changes in the work around solution

[gwyneplaine]

Since this is a small PR and it's way behind in git history, I'm gonna close this in favour of mirroring the changes on a new branch to avoid git history murkiness 👍 cc @jesstelford @sophschneider