Twind and React-Query/Suspense prevent styles from loading immediately

[b3nten]

This is a bit of a weird one.

Essentially, the first time you load a page after starting the server, the styles for a component inside of a suspense boundary are delayed when the suspense boundary resolves. In fact, when setting an arbitrary delay inside the fetch call, the styles are delayed by that amount of time. This only occurs on first load - subsequent loading of the page, without restarting the dev server, don't have this issue. I'm not sure the repercussions of having multiple clients hitting the server.

https://github.com/B3nten/twind-suspense

Additionally, the same problem occurs in the working example here: #153

[deckchairlabs]

Yeah, so this seems to be related to suspense and the twind stylesheet. When you're suspending, the tw template literal isn't being called during the flush effect for injecting the twind style tag into the head, since that suspense will resolve AFTER the stream has started sending.

You can move the tw call to the outside of the Component for this to work as intended, although ideally we need a way of checking if the twind virtual sheet has new rules added to it, as those suspense boundaries are resolving server side. eg.

const className = tw`text-red-500`
export function Todo({ todo }: { todo: number }) {
  ...
}

[mashaal]

It looks like this is fixed in the upcoming version of React. The style tags are hoisted into the head automatically with the new head/inject to stream feature.

Testing in the experimental example atm.

reactjs/rfcs#219

[mashaal]

Should be fixed with ff26246