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
This commit is contained in:
4 files changed
+218
-22
No files matched your search
@@ -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; }
|
||||
}
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user