feat(slint): discover home loading skeleton + paginated slim carousels

Three of the four Discover > Home quick-wins.

Loading skeleton (#1):
  - New HomeSkeleton replaces the spinner + "Loading your music…"
    text shown while the first fetch is in flight. Grey placeholder
    blocks shaped like two real carousels (title bar + a row of
    square art with two text lines), gently pulsing via a shared
    900ms Timer phase + animate opacity — no more artifact titles
    during load.

Recently Played Tracks + Popular albums (#3, #4):
  - New SlimCarousel: a paginated 4x3 slim-card grid (12 per page),
    capped at two pages, sliding one viewport width per page. The
    prev/next controls only appear when there is a second page
    (>12 items); 12 or fewer renders as a single static page with
    no arrows. Replaces the old non-paginated GridSection that grew
    into a tall wall of rows.
  - home.rs caps `recent` and `popular` to 24 items (two pages) so
    the carousel never has hidden overflow; the Popular/Recent
    artwork-job indices are unchanged.

GridSection is retained — the artist ReleaseGrid still uses it.

Note on #2 (Recently Played Albums "spurious AlbumCard"): there is
only one AlbumCard component (discover/AlbumCard.slint, used by 5
call sites incl. this carousel via Carousel) — no duplicate to
delete. The cards look bare because the local play-history store
keeps only id/title/artist/artwork (no quality/year/ribbon), not
because of a different component.

cc

crates/qbz-slint/src/home.rs

@@ -122,11 +122,14 @@ where
         containers.album_of_the_week,
     );
 
+    // Capped at 24 (two carousel pages of 12) — the slim carousel
+    // does not show beyond that.
     let popular = containers
         .most_streamed
         .map(|container| container.data.items)
         .unwrap_or_default()
         .into_iter()
+        .take(24)
         .enumerate()
         .map(|(index, album)| map_slim(index, album))
         .collect();
@@ -148,8 +151,10 @@ where
 
     // Recently played comes from the local play-history store, not the
     // discover index. Empty until the playback session records plays.
+    // Capped at 24 (two carousel pages of 12).
     let recent = crate::recently::load()
         .into_iter()
+        .take(24)
         .map(|track| SlimData {
             id: track.id,
             title: track.title,

crates/qbz-slint/ui/discover/HomeSkeleton.slint

@@ -0,0 +1,70 @@
+// Loading skeleton for the Discover home — grey placeholder blocks
+// shaped like the real carousels, gently pulsing (fade in/out) while
+// the first fetch is in flight. Replaces the spinner + "Loading…"
+// text so the first paint reads as the page filling in rather than a
+// generic loader.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Radius } from "../foundation/radius.slint";
+
+// A single shimmering block. Opacity breathes between two values on a
+// shared phase so the whole skeleton pulses in unison.
+component Shimmer inherits Rectangle {
+    in property <bool> phase;
+    background: Theme.surface-elevated;
+    border-radius: Radius.sm;
+    opacity: root.phase ? 0.85 : 0.4;
+    animate opacity { duration: 900ms; easing: ease-in-out; }
+}
+
+// One placeholder carousel: a short title bar over a row of card
+// blocks (square art + two text lines).
+component SkeletonRow inherits VerticalLayout {
+    in property <bool> phase;
+    in property <length> card-size: 220px;
+    spacing: 12px;
+
+    Shimmer {
+        phase: root.phase;
+        width: 180px;
+        height: 22px;
+    }
+    HorizontalLayout {
+        spacing: 32px;
+        for _ in [0, 1, 2, 3, 4]: VerticalLayout {
+            spacing: 8px;
+            Shimmer {
+                phase: root.phase;
+                width: root.card-size;
+                height: root.card-size;
+            }
+            Shimmer {
+                phase: root.phase;
+                width: root.card-size * 0.7;
+                height: 14px;
+            }
+            Shimmer {
+                phase: root.phase;
+                width: root.card-size * 0.45;
+                height: 12px;
+            }
+        }
+    }
+}
+
+export component HomeSkeleton inherits VerticalLayout {
+    property <bool> phase: false;
+    spacing: 40px;
+
+    // Drives the shared breathing phase.
+    Timer {
+        interval: 900ms;
+        running: true;
+        triggered => {
+            root.phase = !root.phase;
+        }
+    }
+
+    SkeletonRow { phase: root.phase; }
+    SkeletonRow { phase: root.phase; }
+}

crates/qbz-slint/ui/discover/HomeView.slint

@@ -10,10 +10,10 @@ import { Theme } from "../foundation/semantic-colors.slint";
 import { Typography } from "../foundation/typography.slint";
 import { HomeState, HomeActions, NavState, ContentView } from "../state.slint";
 import { Carousel } from "Carousel.slint";
-import { GridSection } from "GridSection.slint";
+import { SlimCarousel } from "SlimCarousel.slint";
+import { HomeSkeleton } from "HomeSkeleton.slint";
 import { QbzIcon } from "../primitives/QbzIcon.slint";
 import { NavButtons } from "../shell/NavButtons.slint";
-import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
 
 // Header + hint shown for a recently-played module while it has no data
 // yet (the play history fills once the playback session records plays).
@@ -230,23 +230,7 @@ export component HomeView inherits Rectangle {
                 spacing: 40px;
                 alignment: start;
 
-                if HomeState.loading && HomeState.sections.length == 0: Rectangle {
-                    height: 320px;
-                    VerticalLayout {
-                        alignment: center;
-                        spacing: 18px;
-                        HorizontalLayout {
-                            alignment: center;
-                            LoadingSpinner { size: 36px; }
-                        }
-                        Text {
-                            text: @tr("Loading your music…");
-                            color: Theme.text-muted;
-                            font-size: 13px;
-                            horizontal-alignment: center;
-                        }
-                    }
-                }
+                if HomeState.loading && HomeState.sections.length == 0: HomeSkeleton { }
 
                 for section in HomeState.sections: Carousel {
                     section: section;
@@ -283,9 +267,10 @@ export component HomeView inherits Rectangle {
                     hint: @tr("Albums you play will appear here.");
                 }
 
-                // Recently Played Tracks — always present, same pattern.
+                // Recently Played Tracks — paginated 4x3 carousel
+                // (12 per page, up to two pages).
                 if HomeState.active-tab == "home"
-                    && HomeState.recent.length > 0: GridSection {
+                    && HomeState.recent.length > 0: SlimCarousel {
                     title: @tr("Recently Played Tracks");
                     items: HomeState.recent;
                     item-clicked(id) => {
@@ -299,7 +284,7 @@ export component HomeView inherits Rectangle {
                 }
 
                 if HomeState.active-tab == "home"
-                    && HomeState.popular.length > 0: GridSection {
+                    && HomeState.popular.length > 0: SlimCarousel {
                     title: @tr("Popular albums");
                     items: HomeState.popular;
                     item-clicked(id) => {

crates/qbz-slint/ui/discover/SlimCarousel.slint

@@ -0,0 +1,136 @@
+// A paginated slim-card section (Recently Played Tracks, Popular
+// albums). 12 items per page (4 columns x 3 rows), capped at two
+// pages. The prev/next controls only appear when there is more than
+// one page; the track slides horizontally by a full viewport width.
+//
+// Mirrors the Tauri home: a 4x3 grid that pages rather than growing
+// into a tall wall of rows.
+
+import { Theme } from "../foundation/semantic-colors.slint";
+import { Typography } from "../foundation/typography.slint";
+import { SlimItem } from "../state.slint";
+import { SlimCard } from "SlimCard.slint";
+import { QbzIcon } from "../primitives/QbzIcon.slint";
+
+component NavButton inherits Rectangle {
+    in property <image> icon;
+    in property <bool> enabled: true;
+    callback clicked();
+
+    width: 28px;
+    height: 28px;
+    border-radius: 14px;
+    opacity: root.enabled ? 1.0 : 0.4;
+    background: ta.has-hover && root.enabled
+        ? Theme.surface-hover
+        : Theme.surface-elevated;
+
+    QbzIcon {
+        source: root.icon;
+        width: 15px;
+        height: 15px;
+        x: (parent.width - self.width) / 2;
+        y: (parent.height - self.height) / 2;
+        tint: root.enabled ? Theme.text-primary : Theme.text-muted;
+    }
+
+    ta := TouchArea {
+        enabled: root.enabled;
+        mouse-cursor: root.enabled ? pointer : default;
+        clicked => {
+            root.clicked();
+        }
+    }
+}
+
+export component SlimCarousel inherits VerticalLayout {
+    in property <string> title;
+    in property <[SlimItem]> items;
+    callback item-clicked(string);
+
+    property <int> columns: 4;
+    property <int> rows: 3;
+    property <length> gap: 8px;
+    property <length> row-height: 60px;
+    property <int> per-page: root.columns * root.rows; // 12
+    // Cap at two pages (24 items); excess is not shown.
+    property <int> total: Math.min(root.items.length, 2 * root.per-page);
+    property <int> page-count: Math.max(1, Math.ceil(root.total / root.per-page));
+    property <int> page: 0;
+    // Self-correcting page index — stays valid if the window resizes.
+    property <int> current-page: Math.min(Math.max(0, root.page), root.page-count - 1);
+
+    spacing: 12px;
+
+    // --- Header: title + (conditional) page controls ---------------------
+    HorizontalLayout {
+        Text {
+            text: root.title;
+            color: Theme.text-primary;
+            font-size: 18px;
+            font-weight: Typography.semibold;
+            vertical-alignment: center;
+            horizontal-stretch: 1;
+        }
+        // Only when there is a second page.
+        if root.total > root.per-page: HorizontalLayout {
+            spacing: 4px;
+            VerticalLayout {
+                alignment: center;
+                NavButton {
+                    icon: @image-url("../assets/icons/chevron-left.svg");
+                    enabled: root.current-page > 0;
+                    clicked => {
+                        root.page = root.current-page - 1;
+                    }
+                }
+            }
+            VerticalLayout {
+                alignment: center;
+                NavButton {
+                    icon: @image-url("../assets/icons/chevron-right.svg");
+                    enabled: root.current-page < root.page-count - 1;
+                    clicked => {
+                        root.page = root.current-page + 1;
+                    }
+                }
+            }
+        }
+    }
+
+    // --- Track: clipped viewport, slides one page width at a time --------
+    viewport := Rectangle {
+        height: root.rows * root.row-height + (root.rows - 1) * root.gap;
+        clip: true;
+
+        property <length> cell-width:
+            (self.width - (root.columns - 1) * root.gap) / root.columns;
+
+        Rectangle {
+            x: -root.current-page * viewport.width;
+            width: root.page-count * viewport.width;
+            height: parent.height;
+            animate x { duration: 220ms; easing: ease-in-out; }
+
+            for item[i] in root.items: SlimCard {
+                // Only the first `total` items are laid out; the rest
+                // (beyond two pages) collapse to zero and stay off-screen.
+                property <bool> shown: i < root.total;
+                property <int> slot: Math.mod(i, root.per-page);
+                property <int> page-idx: Math.floor(i / root.per-page);
+                property <int> slot-col: Math.mod(self.slot, root.columns);
+                property <int> slot-row: Math.floor(self.slot / root.columns);
+                visible: self.shown;
+                width: self.shown ? viewport.cell-width : 0px;
+                height: root.row-height;
+                x: self.page-idx * viewport.width
+                    + self.slot-col * (viewport.cell-width + root.gap);
+                y: self.slot-row * (root.row-height + root.gap);
+                item: item;
+                clicked(id) => {
+                    root.item-clicked(id);
+                }
+            }
+        }
+    }
+}