Do we need a test ID selector here? I'm not sure why the row selectors wouldn't work here, but would still work for other test cases

I'm asking because I haven't had much chance to touch Playwright yet, and don't know what it does for test setup: is deleteOrganization needed for test isolation?

I'm mainly wondering why the call is present for the first two tests as (what looks like) a cleanup step, but some of the later, non-deletion tests in this file don't have it

I'm also not sure if Playwright supports any "true concurrency", rather than doing everything through the event loop

I originally added this to fix some test failures across tests that were creating organizations. From the documentation and my testing, it does appear tests are run in parallel. The intention was to add this cleanup step anytime an org is created to avoid test flakes in the future.

What is this effect call trying to sync? I would think that you would normally be able to pass the ID down to the base element directly via props

With this current setup, React's reconciler might get out of sync with the DOM:

1. Input mounts with ID value 1
2. Re-render happens with ID value 2
3. Effect fires after repaint, and the underlying DOM element is mutated
4. At this point, even though all the updates happened through React, React thinks that the ID is still value 1, even though it's now value 2. Specifically because the value changed outside of the main render logic

I don't see anything complicated enough that would require this kind of risk, and I would hope the component primitive would let you bind the ID to the element directly in the render step

moved this logic outside of the useEffect

This is an improvement for screen readers, but I'm still not sure why the alignment couldn't be set up with pure CSS?

I am definitely not an expert with css grid as I usually use flexbox but I wanted to try to make this work with a grid. I thought something needs to exist in each cell of the grid for it to display correctly. Is there something better to use than a div or a nbsp?

Now that I'm writing this out, I'm realizng that I've never used this grid property before, but I would imagine that align-items: end would do the trick

If that doesn't work with grid, it should definitely work with flexbox. Either way, the approach I've been thinking about is having the element be aligned to the end bound of the cross-axis

I went through every combination of align-items and align-self on the row and each cell and none of these resolved the alignment issue.

Flagging this empty div, too – not sure why this couldn't be CSS

@jaaydenh Pinging you again about this question thread

So to be honest, at first blush, it seemed to me less like an issue with the Spinner component itself, and more so how it was being applied here in the code

But now that I'm looking at the code, I do think there's room to beef it up so that you don't have to think about these edge cases but also remove some animation flicker on modal transitions. I'll see if I can squeeze those in sometime tomorrow

To be clear, the current code is still breaking browser behavior, and this was the main reason why I pushed back on approving at first, but I'm okay with treating this as a known shippable