Site Editor Loading: Use Suspense #60501
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
the
[Type] Technical Prototype
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: -113 B (0%) Total Size: 1.73 MB
ℹ️ View Unchanged
|
|
Interesting experiment. Note: The |
@jsnajdr not sure if you're aware of this. |
gziolo
added
the
[Feature] Site Editor
Ha, I was slightly aware of this, but to really understand what exactly is anti-suspense, I had to play with function LoadItems( { type } ) {
const [ records ] = useSuspenseSelect(
( select ) => [ select( coreStore ).getEntityRecords( 'postType', type ) ],
[ type ]
);
return (
<ul>
{ records.map( ( r ) => <li>{ r.id }: { r.title.rendered }</li> ) }
</ul>
);
}
function App() {
const [ tab, setTab ] = useState( 'post' );
const switchTab = ( t ) => () => startTransition( () => setTab( t ) );
return (
<Suspense fallback={ 'loading' }>
<button onClick={ switchTab( 'post' ) }>posts</button>
<button onClick={ switchTab( 'page' ) }>pages</button>
<LoadItems type={ tab } />
</Suspense>
);
}Here we're using This all works 100% with Where it breaks down is when you want to manage the const tab = useSelect( ( select ) => select( tabsStore ).getTab(), [] );
const { setTab } = useDispatch( tabsStore );
startTransition( () => {
setTab( type );
} );Here This is very relevant when you work on a router, want to support seamless transitions when navigating between routes, and want to keep the router state in an external store. In principle it should be possible to implement. The uSES inside A very related thing is our "async mode" where |
tyxla
reviewed
Apr 16, 2024
There was a problem hiding this comment.
Note that we tinkered with altering useSelect with useSuspenseSelect in #42525 (single suspense boundary) and #47612 (multiple suspense boundaries for header, footer, etc.) and decided not to go with that because it requires too many useSelect() to be changed to useSuspenseSelect and that on its own requires a wrapping suspense boundary which is not guaranteed to be there without potentially introducing breaking changes.
|
I think at some point we'll have to find a solution for loading a given "preview"/"editor". We can't rely on a single loader for the whole editor, specially when things will get lazy loaded more in the site editor... You can already see that as you navigate in the site editor, the behavior is not great. I'm not married to the idea of using Suspense, but I don't have other ideas for now. Also updating some blocks to useSuspenseSelect is not a big blocker to me if we figure out a way to make useSuspenseSelect work like a regular useSelect when there's no wrapper. |
Agreed 👍
I have a vague memory that altering |
|
I need to free some of the tasks on my plate, this experiment may serve as documentation for someone in the future to try it again. But I'm closing for now. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is just a POC for now. The idea is to try to use React Suspense to replace the
useIsEditorLoadinghook we have in the site editor.The hook looks for all resolvers, while suspense look for suspending selects (usage of useSuspenseSelect for now).
The ultimate goal is to be able to show a "loader" per block preview (like when showing a list of templates in the site editor). (not implemented yet).
To be honest, I'm not sure if we can pull this off, but I want to understand the limitations better.