Refetch Sync dialog on focus and add spinner

[nightnei]

Related issues

• Fixes STU-1507

How AI was used in this PR

AI assisted me, but the implementation is mine.

Proposed Changes

1. The use case is - user opens Sync dialog, realizes that they need to connect Jetpack in Pressable, so they keep the dialog open and move to the browser to connect Jetpack to their site on Pressable. Then they return to Studio, don't see the just-connected site, and they restart Studio.

The solution - we need to refetch sites on the focus event, if the Sync dialog is opened in Studio.

2. Right now, when we reopen the Sync dialog - we take data from cache and start refetching, but we don't communicate that we are refetching them. That's why when a user reopens the Sync dialog, we have a flash of content after a few seconds. I had a case where I was selecting a site and ended up choosing the wrong one because of a flash of content.

The solution - we should communicate in UI that we are refetching sites.

Testing Instructions

1. Opean Sync dialog and assert that you see Loading sites
   
2. Close the dialog and open again
3. Assert that you see sites rendered from cache, but covered with blurred "Refreshing sites" spinner
   
4. Leave Studio and focus on another app on your laptop
5. Comeback and focus on Studio again
6. Assert that you see "Refreshing sites" spinner
   

[wpmobilebot]

📊 Performance Test Results

Comparing f0b0a77 vs trunk

app-size

Metric	trunk	f0b0a77	Diff	Change
App Size (Mac)	1252.06 MB	1252.04 MB	0.02 MB	⚪ 0.0%

site-editor

Metric	trunk	f0b0a77	Diff	Change
load	1880 ms	1896 ms	+16 ms	⚪ 0.0%

site-startup

Metric	trunk	f0b0a77	Diff	Change
siteCreation	9139 ms	9178 ms	+39 ms	⚪ 0.0%
siteStartup	4935 ms	4943 ms	+8 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[shaunandrews]

I made a few small tweaks to the blur and opacity to help with contrast a bit. I added a quick fade in/out transition. I added the loading spinner and simplified the message to "Refreshing..." — and also updated the loading message to use the spinner and just "Loading..."

[katinthehatsite]

I like the updated design and I think it looks quite nice 😍

One thing that I noticed is that sometimes when I open for the first time the sync dialog for a specific site, it shows Refreshing instead of Loading which is slightly confusing since this is what the user is seeing for the first time for that site:

Screen.Recording.2026-04-08.at.12.06.47.PM.mov

Do you think it is something that we could adjust? There are also a couple of minor linter issues that need to be resolved.

[nightnei]

@katinthehatsite

There are also a couple of minor linter issues that need to be resolved.

Fixed

Do you think it is something that we could adjust?

Hm, IDK what is the best approach here 🤔 The problem is - we render "Refreshing" in case when we have data already in cache, but we use useGetWpComSitesQuery on many pages/places. Invalidation of such data can slow down some parts of Studio so I don't think that it's a good way. On the other hand we could render always only "Loading..." copy inside Sync dialog, but it can also feel confusing when Studio loads data which is already in place, that's why I intentionally went with the approach of printing "Refreshing" when we indeed refresh data.
TBH, IDK what is the best approach, so I would leave it as is and later we can improve if we find it critical.

[katinthehatsite]

Hm, IDK what is the best approach here 🤔 The problem is - we render "Refreshing" in case when we have data already in cache, but we use useGetWpComSitesQuery on many pages/places. Invalidation of such data can slow down some parts of Studio so I don't think that it's a good way. On the other hand we could render always only "Loading..." copy inside Sync dialog, but it can also feel confusing when Studio loads data which is already in place, that's why I intentionally went with the approach of printing "Refreshing" when we indeed refresh data.
TBH, IDK what is the best approach, so I would leave it as is and later we can improve if we find it critical.

Makes sense, let's leave as is and we can iterate if this creates confusion.