+1

rockskyweb/src/hooks/useFeed.tsx

··· 33 33 listeners: response.data.listeners || 1, 34 34 scrobbles: response.data.scrobbles || 1, 35 35 lyrics: response.data.track_id?.lyrics, 36 36 + spotifyLink: response.data.track_id?.spotify_link, 36 37 }; 37 38 }; 38 39

+1

rockskyweb/src/hooks/useLibrary.tsx

··· 17 17 listeners: response.data?.listeners || 1, 18 18 scrobbles: response.data?.scrobbles || 1, 19 19 lyrics: response.data?.lyrics, 20 20 + spotifyLink: response.data?.spotify_link, 20 21 }; 21 22 }; 22 23

+4 -4

rockskyweb/src/layouts/ExternalLinks/ExternalLinks.tsx

··· 3 3 import { LabelLarge } from "baseui/typography"; 4 4 import { useAtomValue } from "jotai"; 5 5 import { useLocation } from "react-router"; 6 6 - import { artistAtom } from "../../atoms/artist"; 6 6 + import { songAtom } from "../../atoms/song"; 7 7 8 8 const Link = styled.a` 9 9 text-decoration: none; ··· 14 14 `; 15 15 16 16 function ExternalLinks() { 17 17 - const artist = useAtomValue(artistAtom); 17 17 + const song = useAtomValue(songAtom); 18 18 const location = useLocation(); 19 19 const { pathname } = location; 20 20 const display = ··· 22 22 pathname.includes("app.rocksky.song"); 23 23 return ( 24 24 <> 25 25 - {display && artist?.spotifyLink && ( 25 25 + {display && song?.spotifyLink && ( 26 26 <div style={{ marginTop: 50 }}> 27 27 <LabelLarge marginBottom={"10px"}>External Links</LabelLarge> 28 28 - <Link href={artist?.spotifyLink} target="_blank"> 28 28 + <Link href={song?.spotifyLink} target="_blank"> 29 29 <Spotify size={25} color="#1dd05d" /> 30 30 <span style={{ marginLeft: 10 }}>Spotify</span> 31 31 </Link>

+6 -3

rockskyweb/src/pages/song/Song.tsx

··· 8 8 } from "baseui/typography"; 9 9 import { useAtomValue, useSetAtom } from "jotai"; 10 10 import numeral from "numeral"; 11 11 - import { useEffect } from "react"; 11 11 + import { useEffect, useState } from "react"; 12 12 import ContentLoader from "react-content-loader"; 13 13 import { Link as DefaultLink, useParams } from "react-router"; 14 14 import { songAtom } from "../../atoms/song"; ··· 39 39 const { getSongByUri } = useLibrary(); 40 40 const song = useAtomValue(songAtom); 41 41 const setSong = useSetAtom(songAtom); 42 42 + const [loading, setLoading] = useState(true); 42 43 useEffect(() => { 43 44 const getSong = async () => { 45 45 + setLoading(true); 44 46 // if path contains app.rocksky.scrobble, get the song 45 47 if (window.location.pathname.includes("app.rocksky.scrobble")) { 46 48 const data = await getFeedByUri(`${did}/app.rocksky.scrobble/${rkey}`); ··· 52 54 const data = await getSongByUri(`${did}/app.rocksky.song/${rkey}`); 53 55 setSong(data); 54 56 } 57 57 + setLoading(false); 55 58 }; 56 59 getSong(); 57 60 // eslint-disable-next-line react-hooks/exhaustive-deps ··· 60 63 return ( 61 64 <Main> 62 65 <div style={{ paddingBottom: 100, paddingTop: 50 }}> 63 63 - {!song && ( 66 66 + {loading && ( 64 67 <ContentLoader viewBox="0 0 520 160" height={160} width={400}> 65 68 <rect x="220" y="21" rx="10" ry="10" width="294" height="20" /> 66 69 <rect x="221" y="61" rx="10" ry="10" width="185" height="20" /> ··· 70 73 <rect x="48" y="21" rx="8" ry="8" width="150" height="150" /> 71 74 </ContentLoader> 72 75 )} 73 73 - {song && ( 76 76 + {!loading && ( 74 77 <> 75 78 <Group> 76 79 {song?.albumUri && (