Skip to content

Block Theme Preview: Display loading state when activating#55658

Merged
okmttdhr merged 1 commit intoWordPress:trunkfrom
arthur791004:feat/block-theme-preview-activate-state
Nov 2, 2023
Merged

Block Theme Preview: Display loading state when activating#55658
okmttdhr merged 1 commit intoWordPress:trunkfrom
arthur791004:feat/block-theme-preview-activate-state

Conversation

@arthur791004
Copy link
Copy Markdown
Contributor

What?

We want to display the loading state when people are previewing the theme and activating it.

Why?

Resolved #55273

How?

Use startResolution & finishResolution to record we're activating the theme. I'm not sure whether it's a good idea but it's simple enough and provides a better experience. Additionally, we can keep using the same way when we have the rest API to activate the theme.

Testing Instructions

  1. Go to Appearance > Themes
  2. Hover on a block theme
  3. Click the ”Live Preview“ button
  4. Click the “Activate” button in the Editor
  5. Verify the button displays the loading state correctly

Testing Instructions for Keyboard

Screenshots or screencast

btp-activate-1.mov
btp-activate-2.mov

Copy link
Copy Markdown
Contributor

@okmttdhr okmttdhr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change looks good to me 👍

@scruffian Could you leave a comment, if any? Otherwise, I'll just merge it 🙂

Comment on lines +36 to 41
startResolution( 'activateTheme' );
await window.fetch( activationURL );
finishResolution( 'activateTheme' );
const { wp_theme_preview: themePreview, ...params } =
location.params;
history.replace( params );
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Outside the scope of this PR, but it's worth noting that history.replace (which removes ?wp_theme_preview=) is executed regardless of the HTTP status returned by window.fetch, including a 500 error 😇 CC: @scruffian

@okmttdhr okmttdhr requested a review from scruffian November 1, 2023 01:46
@okmttdhr okmttdhr added the [Type] Enhancement A suggestion for improvement. label Nov 1, 2023
Copy link
Copy Markdown
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change looks good, although I've not tested. Happy for you to merge if you're also happy with it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Block Theme Previews: Activate button has no loading state

3 participants