Remove jQuery from user notes preview

[cbravobernal]

What

Remove jQuery from user-notes-preview.js

Why

jQuery is known to inflate the bundle size of packages, and in most cases, it can be replaced with native language functionality.

[ryelle]

I'm getting an error when I test this, it looks like firstChild is a text node, not an html element.

[sirreal]

👍 Looks like a place for firstElementChild

[cbravobernal]

Fixed in 6762ec8

It's weird I didn't get the error until now 🤔

[ryelle]

This does create the spinner correctly, but apparently it was never styled when we moved to the block theme, so nothing is visible. Not a problem for this PR though.

[cbravobernal]

Where can I check the old styles?

[ryelle]

I wouldn't copy over the old styles, but you could borrow the loading animation from this CSS (it's the loading state for images such as the pattern & style variation screenshots on Themes).

[cbravobernal]

The spinner didn't have any styled, an empty span was appearing. I added the style, but the time of the spinner is quite small.

Screen.Recording.2024-07-29.at.16.46.45.mov

[obenland]

Thanks for this! Two things need fixing before it can go in:

1. js/user-notes-preview.js — the #commentform .tablist selector runs before the existence guard. The script loads on every singular page, but the comment form only renders for logged-in users on parsed post types, so logged-out visitors and handbook pages get an uncaught TypeError on every load. Move that line inside the if ( textarea && preview && tabs.length > 0 ) block.
2. src/style/style.scss — the .spinner::after animation references rotate-360, but those keyframes aren't defined in this theme, the parent theme, or any globally loaded mu-plugin CSS. Add a @keyframes rotate-360 { to { transform: rotate(360deg); } } so the spinner actually spins.

Everything else checks out: fetch/nonce handling, escaping, event binding, and the two earlier review threads were addressed.

🤖 Generated with Claude Code