diff --git a/src/App.tsx b/src/App.tsx index 34b98f7..483b1df 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react'; import { ConnectScreen } from './components/ConnectScreen'; import { DedupeScreen } from './components/DedupeScreen'; +import { Loading } from './components/Loading'; import { PlaylistPicker, type Mode } from './components/PlaylistPicker'; import { SwipeScreen } from './components/SwipeScreen'; import { createHistoryStore } from './core/historyStore'; @@ -101,7 +102,11 @@ export function App() { switch (screen.name) { case 'loading': - return
Connecting to Spotify…
; + return ( +
+ Connecting to Spotify… +
+ ); case 'connect': return void auth.login()} />; case 'picker': diff --git a/src/components/DedupeScreen.tsx b/src/components/DedupeScreen.tsx index ca53b9d..a7c2c81 100644 --- a/src/components/DedupeScreen.tsx +++ b/src/components/DedupeScreen.tsx @@ -8,6 +8,7 @@ import { useSnapshot } from '../hooks/useSnapshot'; import type { SpotifyApi } from '../spotify/api'; import { AuthError, describeError } from '../spotify/errors'; import { HistoryPanel } from './HistoryPanel'; +import { Loading } from './Loading'; import { Toast } from './Toast'; interface Props { @@ -76,7 +77,12 @@ export function DedupeScreen(props: Props) { ); } - if (!loaded) return
Loading songs…
; + if (!loaded) + return ( +
+ Loading songs… +
+ ); return ( +