Flash of unstyled content with Tailwind and Frontity

🙋Get Help
1

Hello all,

Problem 1:

In the Domain: https://fouc.bowriverstudio.vercel.app
Repo: https://github.com/Bowriverstudio/flash-of-unstyled-content-frontity-tailwind

On the initial load, there is a flash of unstyled content.

Any suggestions on how to handle it? I am hoping that will fix the lighthouse speed test.
https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Ffouc.bowriverstudio.vercel.app

Problem 2: In the same repo in development mode, I get the warning.

Warning: Each child in a list should have a unique “key” prop.

Check the top-level render call using . See https://fb.me/react-warning-keys for more information.

I added a key in the code but it gets filtered out. see: https://github.com/Bowriverstudio/flash-of-unstyled-content-frontity-tailwind/blob/master/packages/mars-theme/src/components/Header/Header.js

2

Hi @maurice.tadros

Re problem 1: I’m not getting the FOUC. I tried it in three browsers, Chrome, Firefox and Safari. I also cleared my browser cache and tried again and still didn’t see it.

Re problem 2: I’m not sure what you mean by the key in the code gets filtered out. Please elaborate. Thanks.

3

Hello @mburridge,

Thanks for helping me out (BTW I enjoyed your tutorials).

Regarding Problem 1: I took a video of what I am seeing. When I press “Refresh” the menu items shift.

https://www.awesomescreenshot.com/video/811192?key=58abbf6afa34f6d967ca25f345032a09

I replicated this on my mac and pc.

Problem 2:

I wrote this code:

{state.theme.menu.map(([name, link]) => {
	// Check if the link matched the current page url
	const isCurrentPage = state.router.link === link;
	return (
		<>
		{/* If link url is the current page, add `aria-current` for a11y */}
		<Link
			_key={name}
			key={name}
			link={link}
			aria-current={isCurrentPage ? "page" : undefined}
			tw="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150"
		>
			{name}
		</Link>
		</>
	);
})}

I expect the HTML to be

	<a href="/" target="_self" aria-current="page"  key="Home" _key="Home" class="css-ca1s4h-Header">Home</a>

But it is:

	<a href="/" target="_self" aria-current="page" _key="Home" class="css-ca1s4h-Header">Home</a>

Notice the “key” attribute is filtered out.

Thank you

4

Hi @maurice.tadros

Re problem 1 - I did notice the menu move but thought that was an animation that you’d designed in. For FOUC I expected to see text rendered in black Times New Roman on a white page momentarily before the san-serif font on a pale blue background kicked in, and also default browser alignment, i.e. all elements left aligned. I didn’t see any of that - the styling was there immediately. The menu issue might be something else, i.e. not a FOUC as the styling kicks in immediately on page load as far as I can see.

Re problem 2 - I think the “key” attribute is something that React uses internally for iterating over arrays, so I’m not sure you should be expecting it in the final HTML. See here for how React uses keys.

5

Hello @mburridge,

RE problem 1 - The animation is not by design. If it is not a FOUC, what could it be? I’m not really sure why it is happening. I’ve not added any animations. Any thoughts?

RE 2: I stand corrected. Thank you for the clarification :slight_smile:

Cheers,
Maurice

6

Hi @maurice.tadros

I’m not sure. I’ll clone your repo and take a look at the code to see if I can figure it out - no promises though! :smile:

7

Thank you @mburridge !!

No promises that I’m using Frontity and Tailwind in the best way possible. :slight_smile:

Cheers,
Maurice