danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

#867 UX (real fix): render Tidal discovery modal BEFORE the blocking discovery-start POST

Browse source 
The prior UX commit removed a redundant frontend pre-fetch, but the modal was
still only opened at the END of openTidalDiscoveryModal — AFTER awaiting
/api/tidal/discovery/start, whose backend handler fetches the whole playlist
synchronously (Tidal sleeps 1s/page, ~10s) before responding. So the modal still
didn't appear for ~10s. Now open the modal first (with a 'Loading playlist from
Tidal…' note), then fire the discovery-start POST and begin polling; return early
so the shared open at the bottom is skipped for this path.
This commit is contained in:
BoulderBadgeDad 2026-06-13 10:58:29 -07:00
parent 77829622a7
commit ecc07c6811
1 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
webui/static/sync-services.js
View file

@ -540,6 +540,17 @@ async function openTidalDiscoveryModal(playlistId, playlistData) {
// Only start discovery if not already discovered AND not currently discovering // Only start discovery if not already discovered AND not currently discovering
if (!isAlreadyDiscovered && !isCurrentlyDiscovering) { if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
// Open the modal FIRST so it appears instantly. The discovery-start POST
// below fetches the ENTIRE playlist server-side before it responds (Tidal
// sleeps 1s per page → ~10s for a large playlist). Previously the modal
// was only opened AFTER this await, so the user stared at nothing for those
// ~10s. Now the modal shows immediately with a loading note and tracks
// stream in once discovery starts. We return early so the shared open at
// the bottom isn't reached for this path. (#867 UX)
openYouTubeDiscoveryModal(fakeUrlHash);
const _descEl = document.querySelector(`#youtube-discovery-modal-${fakeUrlHash} .modal-description`);
if (_descEl) _descEl.textContent = 'Loading playlist from Tidal…';
// Start Tidal discovery process automatically (like sync.py) // Start Tidal discovery process automatically (like sync.py)
try { try {
console.log(`🔍 Starting Tidal discovery for: ${playlistData.name}`); console.log(`🔍 Starting Tidal discovery for: ${playlistData.name}`);
@ -553,10 +564,12 @@ async function openTidalDiscoveryModal(playlistId, playlistData) {
if (result.error) { if (result.error) {
console.error('❌ Error starting Tidal discovery:', result.error); console.error('❌ Error starting Tidal discovery:', result.error);
showToast(`Error starting discovery: ${result.error}`, 'error'); showToast(`Error starting discovery: ${result.error}`, 'error');
if (_descEl) _descEl.textContent = 'Could not start discovery.';
return; return;
} }
console.log('✅ Tidal discovery started, beginning polling...'); console.log('✅ Tidal discovery started, beginning polling...');
if (_descEl) _descEl.textContent = 'Discovering tracks…';
// Update phase to discovering now that backend discovery is actually started // Update phase to discovering now that backend discovery is actually started
tidalPlaylistStates[playlistId].phase = 'discovering'; tidalPlaylistStates[playlistId].phase = 'discovering';
@ -571,7 +584,9 @@ async function openTidalDiscoveryModal(playlistId, playlistData) {
} catch (error) { } catch (error) {
console.error('❌ Error starting Tidal discovery:', error); console.error('❌ Error starting Tidal discovery:', error);
showToast(`Error starting discovery: ${error.message}`, 'error'); showToast(`Error starting discovery: ${error.message}`, 'error');
if (_descEl) _descEl.textContent = 'Could not start discovery.';
} }
return;
} else if (isCurrentlyDiscovering) { } else if (isCurrentlyDiscovering) {
// Resume polling if discovery is already in progress (like YouTube) // Resume polling if discovery is already in progress (like YouTube)
console.log(`🔄 Resuming Tidal discovery polling for: ${playlistData.name}`); console.log(`🔄 Resuming Tidal discovery polling for: ${playlistData.name}`);