master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Prevent welcome modal from showing on initial page load - Change welcome modal to not open by default - Only show welcome modal after confirming database is empty - Move database initialization check after useDisclosure hook - Fixes premature welcome modal display on app startup

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-06 10:35:17 +02:00
parent 743ed6a54e
commit 535dc16d2c
1 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/frontend/src/App.tsx
View File

@ -83,31 +83,14 @@ export default function RekordboxReader() {
return formatTotalDuration(durationSeconds);
}, []);
// Check if database is initialized (has songs or playlists)
useEffect(() => {
const checkDatabaseInitialized = async () => {
try {
// Check if there are any songs in the database
const songCount = await api.getSongCount();
const hasPlaylists = playlists.length > 0;
setIsDatabaseInitialized(songCount > 0 || hasPlaylists);
} catch (error) {
// If we can't get the song count, assume database is not initialized
setIsDatabaseInitialized(false);
}
};
if (!xmlLoading) {
checkDatabaseInitialized();
}
}, [xmlLoading, playlists.length]);
const navigate = useNavigate();
const location = useLocation();
const initialLoadDone = useRef(false);
const { isOpen, onOpen, onClose } = useDisclosure();
const { isOpen: isWelcomeOpen, onClose: onWelcomeClose } = useDisclosure({ defaultIsOpen: true });
const { isOpen: isWelcomeOpen, onOpen: onWelcomeOpen, onClose: onWelcomeClose } = useDisclosure({ defaultIsOpen: false });
const isMobile = useBreakpointValue({ base: true, md: false });
const [sidebarWidth, setSidebarWidth] = useState(400);
@ -130,6 +113,32 @@ export default function RekordboxReader() {
searchQuery
} = usePaginatedSongs({ pageSize: 50, playlistName: currentPlaylist });
// Check if database is initialized (has songs or playlists) - moved after useDisclosure
useEffect(() => {
const checkDatabaseInitialized = async () => {
try {
// Check if there are any songs in the database
const songCount = await api.getSongCount();
const hasPlaylists = playlists.length > 0;
const isInitialized = songCount > 0 || hasPlaylists;
setIsDatabaseInitialized(isInitialized);
// Only show welcome modal if database is truly empty
if (!isInitialized) {
onWelcomeOpen();
}
} catch (error) {
// If we can't get the song count, assume database is not initialized
setIsDatabaseInitialized(false);
onWelcomeOpen();
}
};
if (!xmlLoading) {
checkDatabaseInitialized();
}
}, [xmlLoading, playlists.length, onWelcomeOpen]);
useEffect(() => {
// Only run this check after the initial data load
if (!xmlLoading && playlists.length > 0) {