Drop zone: avoid media query on mount

[ellatrix]

What?

useReducedMotion triggers a media query, and it's not needed until blocks are dragging over this component.

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jsnajdr <jsnajdr@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mirka]

Refactor looks good and still works as expected 👍

[jsnajdr]

A month ago we discussed useReducedMotion with @tyxla in this PR: #60168 (review)

The point is that each instance of useReducedMotion (and also of useViewportMatch) does its own media query, although they end up being duplicated many times. And if they are really visible on the performance flame chart, it's a problem.

Opposed to that, framer-motion internally does that query just once at boot, in one singleton instance, and doesn't even bother to observe changes. It assumes that the prefers-reduced-motion value is constant for the entire lifetime of the page.

[tyxla]

A month ago we discussed useReducedMotion with @tyxla in this PR: #60168 (review)

The point is that each instance of useReducedMotion (and also of useViewportMatch) does its own media query, although they end up being duplicated many times. And if they are really visible on the performance flame chart, it's a problem.

Opposed to that, framer-motion internally does that query just once at boot, in one singleton instance, and doesn't even bother to observe changes. It assumes that the prefers-reduced-motion value is constant for the entire lifetime of the page.

Yes, I think this is a good idea for a follow-up. I know @DaniGuardiola mentioned he was looking at useReducedMotion() as well (if I'm not wrong) so it could be a nice little optimization to pick up.

[tyxla]

Works well in my testing and code looks good 👍

As @jsnajdr suggested, it could be a good follow-up opportunity to refactor our media query hooks to run fewer times.

[tyxla]

Nit: Given we continue to work with framer motion for this animation (which @DaniGuardiola is looking at changing in #60975), those animation variants could be declared outside of the component, there's no need to redefine them on every DropIndicator render.