diff --git a/apps/web/src/pages/artist/Artist.tsx b/apps/web/src/pages/artist/Artist.tsx
index d5f83d2c..f844b1bf 100644
--- a/apps/web/src/pages/artist/Artist.tsx
+++ b/apps/web/src/pages/artist/Artist.tsx
@@ -19,6 +19,7 @@ import Main from "../../layouts/Main";
 import Albums from "./Albums";
 import ArtistListeners from "./ArtistListeners";
 import PopularSongs from "./PopularSongs";
+import ContentLoader from "react-content-loader";
 
 const Group = styled.div`
   display: flex;
@@ -134,83 +135,109 @@ const Artist = () => {
     <Main>
       <div className="pb-[100px] pt-[50px]">
         <div className="mb-[50px]">
-          <Group>
-            <div className="mr-[20px]">
-              {artist?.picture && !loading && (
-                <Avatar
-                  name={artist?.name}
-                  src={artist?.picture}
-                  size="150px"
-                />
-              )}
-              {!artist?.picture && !loading && (
-                <div className="w-[150px] h-[150px] rounded-[80px] bg-[rgba(243, 243, 243, 0.725)] flex items-center justify-center">
-                  <div
-                    style={{
-                      height: 60,
-                      width: 60,
-                    }}
-                  >
-                    <ArtistIcon color="rgba(66, 87, 108, 0.65)" />
-                  </div>
-                </div>
-              )}
-            </div>
-            {artist && !loading && (
-              <div style={{ flex: 1 }}>
-                <HeadingMedium
-                  marginTop={"20px"}
-                  marginBottom={0}
-                  className="!text-[var(--color-text)]"
-                >
-                  {artist?.name}
-                </HeadingMedium>
-                <div className="mt-[20px] flex flex-row">
-                  <div className="mr-[20px]">
-                    <LabelMedium
-                      margin={0}
-                      className="!text-[var(--color-text-muted)]"
-                    >
-                      Listeners
-                    </LabelMedium>
-                    <HeadingXSmall
-                      margin={0}
-                      className="!text-[var(--color-text)]"
-                    >
-                      {numeral(artist?.listeners).format("0,0")}
-                    </HeadingXSmall>
-                  </div>
-                  <div>
-                    <LabelMedium
-                      margin={0}
-                      className="!text-[var(--color-text-muted)]"
-                    >
-                      Scrobbles
-                    </LabelMedium>
-                    <HeadingXSmall
-                      margin={0}
-                      className="!text-[var(--color-text)]"
+          {loading && (
+            <ContentLoader
+              width="100%"
+              height={200}
+              viewBox="0 0 800 200"
+              backgroundColor="var(--color-skeleton-background)"
+              foregroundColor="var(--color-skeleton-foreground)"
+            >
+              {/* Avatar circle */}
+              <circle cx="75" cy="75" r="75" />
+              {/* Artist name */}
+              <rect x="180" y="40" rx="4" ry="4" width="300" height="24" />
+              {/* Listeners label */}
+              <rect x="180" y="90" rx="3" ry="3" width="80" height="12" />
+              {/* Listeners count */}
+              <rect x="180" y="110" rx="3" ry="3" width="100" height="20" />
+              {/* Scrobbles label */}
+              <rect x="300" y="90" rx="3" ry="3" width="80" height="12" />
+              {/* Scrobbles count */}
+              <rect x="300" y="110" rx="3" ry="3" width="100" height="20" />
+              {/* View on PDSls button */}
+              <rect x="620" y="100" rx="8" ry="8" width="180" height="48" />
+            </ContentLoader>
+          )}
+          {!loading && (
+            <Group>
+              <div className="mr-[20px]">
+                {artist?.picture && (
+                  <Avatar
+                    name={artist?.name}
+                    src={artist?.picture}
+                    size="150px"
+                  />
+                )}
+                {!artist?.picture && (
+                  <div className="w-[150px] h-[150px] rounded-[80px] bg-[rgba(243, 243, 243, 0.725)] flex items-center justify-center">
+                    <div
+                      style={{
+                        height: 60,
+                        width: 60,
+                      }}
                     >
-                      {numeral(artist?.scrobbles).format("0,0")}
-                    </HeadingXSmall>
+                      <ArtistIcon color="rgba(66, 87, 108, 0.65)" />
+                    </div>
                   </div>
-                  <div className="flex items-center justify-end flex-1 mr-[10px]">
-                    <a
-                      href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}
-                      target="_blank"
-                      className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"
-                    >
-                      <ExternalLink
-                        size={24}
-                        className="mr-[10px] text-[var(--color-text)]"
-                      />
-                      View on PDSls
-                    </a>
+                )}
+              </div>
+              {artist && (
+                <div style={{ flex: 1 }}>
+                  <HeadingMedium
+                    marginTop={"20px"}
+                    marginBottom={0}
+                    className="!text-[var(--color-text)]"
+                  >
+                    {artist?.name}
+                  </HeadingMedium>
+                  <div className="mt-[20px] flex flex-row">
+                    <div className="mr-[20px]">
+                      <LabelMedium
+                        margin={0}
+                        className="!text-[var(--color-text-muted)]"
+                      >
+                        Listeners
+                      </LabelMedium>
+                      <HeadingXSmall
+                        margin={0}
+                        className="!text-[var(--color-text)]"
+                      >
+                        {numeral(artist?.listeners).format("0,0")}
+                      </HeadingXSmall>
+                    </div>
+                    <div>
+                      <LabelMedium
+                        margin={0}
+                        className="!text-[var(--color-text-muted)]"
+                      >
+                        Scrobbles
+                      </LabelMedium>
+                      <HeadingXSmall
+                        margin={0}
+                        className="!text-[var(--color-text)]"
+                      >
+                        {numeral(artist?.scrobbles).format("0,0")}
+                      </HeadingXSmall>
+                    </div>
+                    <div className="flex items-center justify-end flex-1 mr-[10px]">
+                      <a
+                        href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}
+                        target="_blank"
+                        className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"
+                      >
+                        <ExternalLink
+                          size={24}
+                          className="mr-[10px] text-[var(--color-text)]"
+                        />
+                        View on PDSls
+                      </a>
+                    </div>
                   </div>
                 </div>
-              </div>
-            )}
-          </Group>
+              )}
+            </Group>
+          )}
 
           {artist && (
             <div className="mt-[30px]">
@@ -226,7 +253,10 @@ const Artist = () => {
             </div>
           )}
         </div>
-        <PopularSongs topTracks={topTracks} />
+        <PopularSongs
+          topTracks={topTracks}
+          isLoading={artistTracksResult.isLoading}
+        />
         <Albums topAlbums={topAlbums} />
         <ArtistListeners listeners={artistListenersResult.data} />
         <Shout type="artist" />
diff --git a/apps/web/src/pages/artist/PopularSongs/PopularSongs.tsx b/apps/web/src/pages/artist/PopularSongs/PopularSongs.tsx
index 5c225cc3..d61d3f4b 100644
--- a/apps/web/src/pages/artist/PopularSongs/PopularSongs.tsx
+++ b/apps/web/src/pages/artist/PopularSongs/PopularSongs.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { Link as DefaultLink } from "@tanstack/react-router";
 import { TableBuilder, TableBuilderColumn } from "baseui/table-semantic";
 import { HeadingSmall } from "baseui/typography";
+import ContentLoader from "react-content-loader";
 
 const Link = styled(DefaultLink)`
   color: inherit;
@@ -36,121 +37,190 @@ interface PopularSongsProps {
     albumUri?: string;
     artistUri?: string;
   }[];
+  isLoading: boolean;
 }
 
 function PopularSongs(props: PopularSongsProps) {
   return (
     <>
-      <HeadingSmall marginBottom={"15px"} className="!text-[var(--color-text)]">
-        Popular Songs
-      </HeadingSmall>
-      <TableBuilder
-        data={props.topTracks.map((x, index) => ({
-          id: x.id,
-          title: x.title,
-          artist: x.artist,
-          albumArtist: x.albumArtist,
-          albumArt: x.albumArt,
-          uri: x.uri,
-          scrobbles: x.scrobbles,
-          albumUri: x.albumUri,
-          artistUri: x.artistUri,
-          index,
-        }))}
-        emptyMessage="You haven't listened to any music yet."
-        divider="clean"
-        overrides={{
-          TableHeadRow: {
-            style: {
-              display: "none",
-            },
-          },
-          TableBodyCell: {
-            style: {
-              verticalAlign: "center",
-            },
-          },
-          TableBodyRow: {
-            style: {
-              backgroundColor: "var(--color-background)",
-              ":hover": {
-                backgroundColor: "var(--color-menu-hover)",
+      {props.isLoading && (
+        <>
+          <HeadingSmall
+            marginBottom={"15px"}
+            className="!text-[var(--color-text)]"
+          >
+            Popular Songs
+          </HeadingSmall>
+          <div className="ml-[-170px] mt-[20px]">
+            <ContentLoader
+              width="100%"
+              height={500}
+              viewBox="0 0 600 500"
+              backgroundColor="var(--color-skeleton-background)"
+              foregroundColor="var(--color-skeleton-foreground)"
+            >
+              {/* Row 1 */}
+              <rect x="0" y="10" rx="3" ry="3" width="30" height="15" />
+              <rect x="50" y="5" rx="4" ry="4" width="60" height="60" />
+              <rect x="130" y="15" rx="3" ry="3" width="200" height="15" />
+              <rect x="130" y="40" rx="3" ry="3" width="150" height="12" />
+              <rect x="500" y="20" rx="3" ry="3" width="60" height="15" />
+
+              {/* Row 2 */}
+              <rect x="0" y="90" rx="3" ry="3" width="30" height="15" />
+              <rect x="50" y="85" rx="4" ry="4" width="60" height="60" />
+              <rect x="130" y="95" rx="3" ry="3" width="200" height="15" />
+              <rect x="130" y="120" rx="3" ry="3" width="150" height="12" />
+              <rect x="500" y="100" rx="3" ry="3" width="60" height="15" />
+
+              {/* Row 3 */}
+              <rect x="0" y="170" rx="3" ry="3" width="30" height="15" />
+              <rect x="50" y="165" rx="4" ry="4" width="60" height="60" />
+              <rect x="130" y="175" rx="3" ry="3" width="200" height="15" />
+              <rect x="130" y="200" rx="3" ry="3" width="150" height="12" />
+              <rect x="500" y="180" rx="3" ry="3" width="60" height="15" />
+
+              {/* Row 4 */}
+              <rect x="0" y="250" rx="3" ry="3" width="30" height="15" />
+              <rect x="50" y="245" rx="4" ry="4" width="60" height="60" />
+              <rect x="130" y="255" rx="3" ry="3" width="200" height="15" />
+              <rect x="130" y="280" rx="3" ry="3" width="150" height="12" />
+              <rect x="500" y="260" rx="3" ry="3" width="60" height="15" />
+
+              {/* Row 5 */}
+              <rect x="0" y="330" rx="3" ry="3" width="30" height="15" />
+              <rect x="50" y="325" rx="4" ry="4" width="60" height="60" />
+              <rect x="130" y="335" rx="3" ry="3" width="200" height="15" />
+              <rect x="130" y="360" rx="3" ry="3" width="150" height="12" />
+              <rect x="500" y="340" rx="3" ry="3" width="60" height="15" />
+
+              {/* Row 6 */}
+              <rect x="0" y="410" rx="3" ry="3" width="30" height="15" />
+              <rect x="50" y="405" rx="4" ry="4" width="60" height="60" />
+              <rect x="130" y="415" rx="3" ry="3" width="200" height="15" />
+              <rect x="130" y="440" rx="3" ry="3" width="150" height="12" />
+              <rect x="500" y="420" rx="3" ry="3" width="60" height="15" />
+            </ContentLoader>
+          </div>
+        </>
+      )}
+      {!props.isLoading && (
+        <>
+          <HeadingSmall
+            marginBottom={"15px"}
+            className="!text-[var(--color-text)]"
+          >
+            Popular Songs
+          </HeadingSmall>
+          <TableBuilder
+            data={props.topTracks.map((x, index) => ({
+              id: x.id,
+              title: x.title,
+              artist: x.artist,
+              albumArtist: x.albumArtist,
+              albumArt: x.albumArt,
+              uri: x.uri,
+              scrobbles: x.scrobbles,
+              albumUri: x.albumUri,
+              artistUri: x.artistUri,
+              index,
+            }))}
+            emptyMessage="You haven't listened to any music yet."
+            divider="clean"
+            overrides={{
+              TableHeadRow: {
+                style: {
+                  display: "none",
+                },
               },
-            },
-          },
-          Table: {
-            style: {
-              backgroundColor: "var(--color-background)",
-            },
-          },
-        }}
-      >
-        <TableBuilderColumn header="Name">
-          {(row: Row) => (
-            <div className="flex flex-row items-center">
-              <div>
-                <div className="mr-[20px] text-[var(--color-text)]">
-                  {row.index + 1}
-                </div>
-              </div>
-              {row.albumUri && (
-                <Link
-                  to={`/${row.albumUri?.split("at://")[1].replace("app.rocksky.", "")}`}
-                >
-                  {!!row.albumArt && (
-                    <img
-                      src={row.albumArt}
-                      alt={row.title}
-                      className="w-[60px] h-[60px] mr-[20px] rounded-[5px]"
-                    />
-                  )}
-                  {!row.albumArt && (
-                    <div className="w-[60px] h-[60px] rounded-[5px] mr-[20px] bg-[rgba(243, 243, 243, 0.725)]" />
-                  )}
-                </Link>
-              )}
-              {!row.albumUri && (
-                <div>
-                  {!!row.albumArt && (
-                    <img
-                      src={row.albumArt}
-                      alt={row.title}
-                      className="w-[60px] h-[60px] mr-[20px] rounded-[5px]"
-                    />
+              TableBodyCell: {
+                style: {
+                  verticalAlign: "center",
+                },
+              },
+              TableBodyRow: {
+                style: {
+                  backgroundColor: "var(--color-background)",
+                  ":hover": {
+                    backgroundColor: "var(--color-menu-hover)",
+                  },
+                },
+              },
+              Table: {
+                style: {
+                  backgroundColor: "var(--color-background)",
+                },
+              },
+            }}
+          >
+            <TableBuilderColumn header="Name">
+              {(row: Row) => (
+                <div className="flex flex-row items-center">
+                  <div>
+                    <div className="mr-[20px] text-[var(--color-text)]">
+                      {row.index + 1}
+                    </div>
+                  </div>
+                  {row.albumUri && (
+                    <Link
+                      to={`/${row.albumUri?.split("at://")[1].replace("app.rocksky.", "")}`}
+                    >
+                      {!!row.albumArt && (
+                        <img
+                          src={row.albumArt}
+                          alt={row.title}
+                          className="w-[60px] h-[60px] mr-[20px] rounded-[5px]"
+                        />
+                      )}
+                      {!row.albumArt && (
+                        <div className="w-[60px] h-[60px] rounded-[5px] mr-[20px] bg-[rgba(243, 243, 243, 0.725)]" />
+                      )}
+                    </Link>
                   )}
-                  {!row.albumArt && (
-                    <div className="w-[60px] h-[60px] rounded-[5px] mr-[20px] bg-[rgba(243, 243, 243, 0.725)]" />
+                  {!row.albumUri && (
+                    <div>
+                      {!!row.albumArt && (
+                        <img
+                          src={row.albumArt}
+                          alt={row.title}
+                          className="w-[60px] h-[60px] mr-[20px] rounded-[5px]"
+                        />
+                      )}
+                      {!row.albumArt && (
+                        <div className="w-[60px] h-[60px] rounded-[5px] mr-[20px] bg-[rgba(243, 243, 243, 0.725)]" />
+                      )}
+                    </div>
                   )}
+                  <div className="flex flex-col">
+                    <Link
+                      to={`/${row.uri?.split("at://")[1].replace("app.rocksky.", "")}`}
+                      className="!text-[var(--color-text)]"
+                    >
+                      {row.title}
+                    </Link>
+                    {row.artistUri && (
+                      <Link
+                        to={`/${row.artistUri?.split("at://")[1].replace("app.rocksky.", "")}`}
+                        className="!text-[var(--color-text-muted)]"
+                      >
+                        {row.albumArtist}
+                      </Link>
+                    )}
+                    {!row.artistUri && (
+                      <div className="!text-[var(--color-text-muted)]">
+                        {row.albumArtist}
+                      </div>
+                    )}
+                  </div>
                 </div>
               )}
-              <div className="flex flex-col">
-                <Link
-                  to={`/${row.uri?.split("at://")[1].replace("app.rocksky.", "")}`}
-                  className="!text-[var(--color-text)]"
-                >
-                  {row.title}
-                </Link>
-                {row.artistUri && (
-                  <Link
-                    to={`/${row.artistUri?.split("at://")[1].replace("app.rocksky.", "")}`}
-                    className="!text-[var(--color-text-muted)]"
-                  >
-                    {row.albumArtist}
-                  </Link>
-                )}
-                {!row.artistUri && (
-                  <div className="!text-[var(--color-text-muted)]">
-                    {row.albumArtist}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </TableBuilderColumn>
-        <TableBuilderColumn header="Scrobbles">
-          {(row: Row) => <div>{row.scrobbles}</div>}
-        </TableBuilderColumn>
-      </TableBuilder>
+            </TableBuilderColumn>
+            <TableBuilderColumn header="Scrobbles">
+              {(row: Row) => <div>{row.scrobbles}</div>}
+            </TableBuilderColumn>
+          </TableBuilder>
+        </>
+      )}
     </>
   );
 }