|
|
@@ -28,7 +28,6 @@ type Props = {
|
|
|
type ArtistData = {
|
|
|
id: string;
|
|
|
artist: string;
|
|
|
- expanded: boolean;
|
|
|
loading: boolean;
|
|
|
active: boolean;
|
|
|
parentActive: boolean;
|
|
|
@@ -49,9 +48,9 @@ const itemKey = (index: number, data: RowData[]): string => data[index].id;
|
|
|
|
|
|
const Artist = namedMemo<{ row: ArtistData; style: CSSProperties }>(
|
|
|
'Artist',
|
|
|
- ({ row: { artist, expanded, loading, active, parentActive }, style }) => (
|
|
|
+ ({ row: { artist, loading, active, parentActive }, style }) => (
|
|
|
<Styled.ArtistTitle active={active} parentActive={parentActive} style={style}>
|
|
|
- {loading && expanded ? <AsciiSpinner /> : <> </>}
|
|
|
+ {loading ? <AsciiSpinner /> : <> </>}
|
|
|
<NoWrapFill>{artist || 'Unknown Artist'}</NoWrapFill>
|
|
|
</Styled.ArtistTitle>
|
|
|
),
|
|
|
@@ -117,10 +116,9 @@ export const Artists: React.FC<Props> = ({ active: parentActive }) => {
|
|
|
const artistRow: ArtistData = {
|
|
|
id: artist,
|
|
|
artist,
|
|
|
- expanded: expandedArtists.includes(artist),
|
|
|
- loading: !(artist in artistAlbums),
|
|
|
+ loading: !(artist in artistAlbums) && expandedArtists.includes(artist),
|
|
|
active: activeArtist === artist && activeAlbum === null,
|
|
|
- parentActive: parentActive && activeArtist === artist,
|
|
|
+ parentActive,
|
|
|
};
|
|
|
|
|
|
if (!expanded) {
|