@@ -397,34 +404,16 @@ function DiscoverContentInner() {
)}
- ) : null}
+ )}
{/* Infinite Scroll Trigger */}
{hasMore && (
-
+
diff --git a/frontend/src/app/subscribe/SubscribeView.tsx b/frontend/src/app/subscribe/SubscribeView.tsx
index 11c6e55c..128051a5 100644
--- a/frontend/src/app/subscribe/SubscribeView.tsx
+++ b/frontend/src/app/subscribe/SubscribeView.tsx
@@ -5,7 +5,8 @@ import { useSearchParams } from 'next/navigation';
import WalletConnect from '@/components/WalletConnect';
import { BookmarkButton } from '@/components/BookmarkButton';
import { CreatorCard } from '@/components/cards';
-import { CardSkeletonGrid, EmptyState } from '@/components/ui/states';
+import { EmptyState } from '@/components/ui/states';
+import { CreatorCardSkeleton } from '@/components/ui/CreatorCardSkeleton';
import { useToast } from '@/contexts/ToastContext';
import {
loadFanQuickstartState,
@@ -137,7 +138,11 @@ export default function SubscribeView() {
{isLoading && (
-
-
- Loading more creators...
+
@@ -456,10 +445,7 @@ export default function DiscoverContent() {
+ {[...Array(4)].map((_, i) => (
+
)}
{[...Array(8)].map((_, i) => (
-
+
Available creators
{isLoadingCreators ? ( -
+ {[...Array(3)].map((_, i) => (
+
) : filteredCreators.length === 0 ? (
Loading subscriptions...
+
+ {[...Array(3)].map((_, i) => (
+
) : activeList.length === 0 ? (
diff --git a/frontend/src/app/subscriptions/subscriptions-filters.test.tsx b/frontend/src/app/subscriptions/subscriptions-filters.test.tsx
index 23723158..61fbba98 100644
--- a/frontend/src/app/subscriptions/subscriptions-filters.test.tsx
+++ b/frontend/src/app/subscriptions/subscriptions-filters.test.tsx
@@ -21,7 +21,11 @@ vi.mock('@/components/cards/BaseCard', () => ({
}));
vi.mock('@/components/ui/HistoryCardSkeleton', () => ({
- default: () => null,
+ default: () => ,
+}));
+
+vi.mock('@/components/ui/ActiveSubscriptionSkeleton', () => ({
+ default: () => ,
}));
vi.mock('@/lib/error-copy', () => ({
@@ -155,4 +159,15 @@ describe('SubscriptionsPage – filter and sort controls', () => {
expect(mockFetch).toHaveBeenCalledTimes(1);
});
});
+
+ it('shows skeletons while loading active subscriptions', async () => {
+ // Return a promise that doesn't resolve immediately
+ mockFetch.mockReturnValue(new Promise(() => {}));
+
+ render( = ({
className = '',
...baseProps
}) => {
+ const thumbnailLoad = useImageLoad();
+ const avatarLoad = useImageLoad();
const formatNumber = (num: number): string => {
if (num >= 1000000) {
return `${(num / 1000000).toFixed(1)}M`;
@@ -201,15 +205,24 @@ export const ContentCard: React.FC = ({
{/* Thumbnail */}
{thumbnailUrl ? (
- = ({
{creatorName && (
{creatorAvatar ? (
- {
/**
@@ -94,6 +96,8 @@ export const CreatorCard: React.FC = ({
return count.toString();
};
+ const avatarLoad = useImageLoad();
+
return (
= ({
{/* Avatar */}
{avatarUrl ? (
- = {
+ title: 'Cards/BaseCard',
+ component: BaseCard,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['default', 'elevated', 'outlined', 'filled'],
+ },
+ padding: {
+ control: 'select',
+ options: ['none', 'sm', 'md', 'lg'],
+ },
+ interactive: { control: 'boolean' },
+ as: {
+ control: 'select',
+ options: ['div', 'article', 'section', 'li'],
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: (
+
+ Card Title
+
+ This is a default card with standard padding and styling.
+
+
+ ),
+ variant: 'default',
+ padding: 'md',
+ },
+};
+
+export const Elevated: Story = {
+ args: {
+ ...Default.args,
+ variant: 'elevated',
+ },
+};
+
+export const Outlined: Story = {
+ args: {
+ ...Default.args,
+ variant: 'outlined',
+ },
+};
+
+export const Filled: Story = {
+ args: {
+ ...Default.args,
+ variant: 'filled',
+ },
+};
+
+export const Interactive: Story = {
+ args: {
+ ...Default.args,
+ interactive: true,
+ },
+};
+
+export const NoPadding: Story = {
+ args: {
+ children: (
+
+ This card has no inner padding applied from the component itself.
+
+ ),
+ padding: 'none',
+ },
+};
diff --git a/frontend/src/components/cards/__tests__/ContentCard.lazyimage.test.tsx b/frontend/src/components/cards/__tests__/ContentCard.lazyimage.test.tsx
new file mode 100644
index 00000000..9bae7a28
--- /dev/null
+++ b/frontend/src/components/cards/__tests__/ContentCard.lazyimage.test.tsx
@@ -0,0 +1,102 @@
+/* eslint-disable @next/next/no-img-element */
+import type { ComponentProps } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ContentCard } from '@/components/cards/ContentCard';
+
+// Mock next/image as a plain ![]()
so onLoad can be fired via fireEvent
+vi.mock('next/image', () => ({
+ default: ({ onLoad, ...props }: ComponentProps<'img'> & { fill?: boolean; priority?: boolean }) => {
+ const sanitizedProps = { ...props } as Record;
+ delete sanitizedProps.fill;
+ delete sanitizedProps.priority;
+ return ![]()
)} onLoad={onLoad} alt={props.alt ?? ''} />;
+ },
+}));
+
+const baseProps = {
+ title: 'Test Content',
+ type: 'image' as const,
+};
+
+describe('ContentCard – lazy-load thumbnail skeleton', () => {
+ it('renders a shimmer skeleton before the thumbnail loads', () => {
+ render(![]()
so onLoad can be fired via fireEvent
+vi.mock('next/image', () => ({
+ default: ({ onLoad, ...props }: ComponentProps<'img'> & { fill?: boolean; priority?: boolean }) => {
+ const sanitizedProps = { ...props } as Record;
+ delete sanitizedProps.fill;
+ delete sanitizedProps.priority;
+ return ![]()
)} onLoad={onLoad} alt={props.alt ?? ''} />;
+ },
+}));
+
+const baseProps = {
+ name: 'Jane Doe',
+ username: 'janedoe',
+};
+
+describe('CreatorCard – lazy-load avatar skeleton', () => {
+ it('renders a shimmer skeleton before the avatar loads', () => {
+ render(
+ ⚠️ NON-PRODUCTION DEMO: This is a test environment for wallet connections. Do not use real funds.
+
+
{thumbnailUrl ? (
-
{getTypeIcon()}
@@ -287,13 +300,22 @@ export const ContentCard: React.FC = ({
{creatorName && (
{creatorAvatar ? (
-
+
) : (
{creatorName.charAt(0).toUpperCase()}
diff --git a/frontend/src/components/cards/CreatorCard.tsx b/frontend/src/components/cards/CreatorCard.tsx
index 508dc350..8b0456aa 100644
--- a/frontend/src/components/cards/CreatorCard.tsx
+++ b/frontend/src/components/cards/CreatorCard.tsx
@@ -1,6 +1,8 @@
import React from 'react';
import { BaseCard, BaseCardProps } from './BaseCard';
import Image from 'next/image';
+import { Skeleton } from '@/components/ui/Skeleton';
+import { useImageLoad } from '@/hooks/useImageLoad';
export interface CreatorCardProps extends Omit {
/**
@@ -94,6 +96,8 @@ export const CreatorCard: React.FC = ({
return count.toString();
};
+ const avatarLoad = useImageLoad();
+
return (
= ({
{/* Avatar */}
{avatarUrl ? (
-
+
) : (
{name.charAt(0).toUpperCase()}
diff --git a/frontend/src/components/cards/__stories__/BaseCard.stories.tsx b/frontend/src/components/cards/__stories__/BaseCard.stories.tsx
new file mode 100644
index 00000000..123af242
--- /dev/null
+++ b/frontend/src/components/cards/__stories__/BaseCard.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BaseCard } from '../BaseCard';
+import React from 'react';
+
+const meta: Meta = {
+ title: 'Cards/BaseCard',
+ component: BaseCard,
+ parameters: {
+ layout: 'padded',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['default', 'elevated', 'outlined', 'filled'],
+ },
+ padding: {
+ control: 'select',
+ options: ['none', 'sm', 'md', 'lg'],
+ },
+ interactive: { control: 'boolean' },
+ as: {
+ control: 'select',
+ options: ['div', 'article', 'section', 'li'],
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: (
+ ![]()
so onLoad can be fired via fireEvent
+vi.mock('next/image', () => ({
+ default: ({ onLoad, ...props }: ComponentProps<'img'> & { fill?: boolean; priority?: boolean }) => {
+ const sanitizedProps = { ...props } as Record;
+ delete sanitizedProps.fill;
+ delete sanitizedProps.priority;
+ return ![]()
)} onLoad={onLoad} alt={props.alt ?? ''} />;
+ },
+}));
+
+const baseProps = {
+ title: 'Test Content',
+ type: 'image' as const,
+};
+
+describe('ContentCard – lazy-load thumbnail skeleton', () => {
+ it('renders a shimmer skeleton before the thumbnail loads', () => {
+ render(![]()
so onLoad can be fired via fireEvent
+vi.mock('next/image', () => ({
+ default: ({ onLoad, ...props }: ComponentProps<'img'> & { fill?: boolean; priority?: boolean }) => {
+ const sanitizedProps = { ...props } as Record;
+ delete sanitizedProps.fill;
+ delete sanitizedProps.priority;
+ return ![]()
)} onLoad={onLoad} alt={props.alt ?? ''} />;
+ },
+}));
+
+const baseProps = {
+ name: 'Jane Doe',
+ username: 'janedoe',
+};
+
+describe('CreatorCard – lazy-load avatar skeleton', () => {
+ it('renders a shimmer skeleton before the avatar loads', () => {
+ render(
+
+ ),
+ variant: 'default',
+ padding: 'md',
+ },
+};
+
+export const Elevated: Story = {
+ args: {
+ ...Default.args,
+ variant: 'elevated',
+ },
+};
+
+export const Outlined: Story = {
+ args: {
+ ...Default.args,
+ variant: 'outlined',
+ },
+};
+
+export const Filled: Story = {
+ args: {
+ ...Default.args,
+ variant: 'filled',
+ },
+};
+
+export const Interactive: Story = {
+ args: {
+ ...Default.args,
+ interactive: true,
+ },
+};
+
+export const NoPadding: Story = {
+ args: {
+ children: (
+ Card Title
++ This is a default card with standard padding and styling. +
+
+ This card has no inner padding applied from the component itself.
+
+ ),
+ padding: 'none',
+ },
+};
diff --git a/frontend/src/components/cards/__tests__/ContentCard.lazyimage.test.tsx b/frontend/src/components/cards/__tests__/ContentCard.lazyimage.test.tsx
new file mode 100644
index 00000000..9bae7a28
--- /dev/null
+++ b/frontend/src/components/cards/__tests__/ContentCard.lazyimage.test.tsx
@@ -0,0 +1,102 @@
+/* eslint-disable @next/next/no-img-element */
+import type { ComponentProps } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ContentCard } from '@/components/cards/ContentCard';
+
+// Mock next/image as a plain