andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert: Remove loading spinner - was slowing down page

Browse Source 
Suspense boundary added complexity and extra queries, making pages slower.
Removed the LoadingSpinner component and Suspense wrapping.

Reverted to simpler, faster approach.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-21 19:32:31 +01:00
co-authored by Claude Haiku 4.5
parent dc9bceb494
commit 234f03b4dd
3 changed files with 42 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/settings.local.json
+2 -1
View File
@@ -161,7 +161,8 @@
"Bash(curl -s \"http://127.0.0.1:3000/products/awd-hoodie\")",
"Bash(git commit -m 'Fix: NavDropdown link navigation with stopPropagation *)",
"Bash(git commit -m 'Feat: Remove all filters from products pages *)",
"Bash(git commit -m 'Feat: Add loading spinner for made-to-order page *)"
"Bash(git commit -m 'Feat: Add loading spinner for made-to-order page *)",
"Bash(git commit -m 'Revert: Remove loading spinner - was slowing down page *)"
]
}
}
src/app/made-to-order/page.tsx
+40 -58
View File
@@ -2,8 +2,6 @@ import { prisma } from '@/lib/prisma';
import { toProductDTO } from '@/lib/product';
import { fetchActivePromotions } from '@/lib/promotions';
import ProductCard from '@/components/ProductCard';
import LoadingSpinner from '@/components/LoadingSpinner';
import { Suspense } from 'react';
type SearchParams = {
page?: string;
@@ -11,7 +9,8 @@ type SearchParams = {
const PRODUCTS_PER_PAGE = 20;
async function ProductsGrid({ currentPage }: { currentPage: number }) {
export default async function ProductsPage({ searchParams }: { searchParams: SearchParams }) {
const currentPage = Math.max(1, Number(searchParams.page) || 1);
const activePromotions = await fetchActivePromotions();
const [rows, totalCount] = await Promise.all([
@@ -27,13 +26,6 @@ async function ProductsGrid({ currentPage }: { currentPage: number }) {
const products = rows.map((p) => toProductDTO(p, activePromotions, 'personalised'));
const totalPages = Math.ceil(totalCount / PRODUCTS_PER_PAGE);
return { products, totalPages, totalCount, currentPage };
}
export default async function ProductsPage({ searchParams }: { searchParams: SearchParams }) {
const currentPage = Math.max(1, Number(searchParams.page) || 1);
const totalCount = await prisma.product.count({ where: { showOnPersonalised: true } });
return (
<div className="mx-auto max-w-6xl px-6 py-12">
<div className="mb-12 flex items-baseline justify-between">
@@ -43,56 +35,46 @@ export default async function ProductsPage({ searchParams }: { searchParams: Sea
</p>
</div>
<Suspense fallback={<LoadingSpinner />}>
<ProductsGridContent currentPage={currentPage} totalCount={totalCount} />
</Suspense>
</div>
);
}
async function ProductsGridContent({ currentPage, totalCount }: { currentPage: number; totalCount: number }) {
const { products, totalPages } = await ProductsGrid({ currentPage });
return (
<div>
{products.length === 0 ? (
<div className="border border-line bg-surface p-12 text-center">
<p className="font-display text-xl">Nothing here yet</p>
<p className="mt-2 text-sm text-muted">Templates will show up here once created.</p>
</div>
) : (
<div>
<div className="grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
{products.map((p) => (
<ProductCard key={p.id} product={p} />
))}
<div>
{products.length === 0 ? (
<div className="border border-line bg-surface p-12 text-center">
<p className="font-display text-xl">Nothing here yet</p>
<p className="mt-2 text-sm text-muted">Templates will show up here once created.</p>
</div>
{totalPages > 1 && (
<div className="mt-12 flex items-center justify-center gap-4 border-t border-line pt-8">
{currentPage > 1 && (
<a
href={`/made-to-order?page=${currentPage - 1}`}
className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper"
>
← Previous
</a>
)}
<p className="text-sm text-muted">
Page {currentPage} of {totalPages}
</p>
{currentPage < totalPages && (
<a
href={`/made-to-order?page=${currentPage + 1}`}
className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper"
>
Next →
</a>
)}
) : (
<div>
<div className="grid gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
{products.map((p) => (
<ProductCard key={p.id} product={p} />
))}
</div>
)}
</div>
)}
{totalPages > 1 && (
<div className="mt-12 flex items-center justify-center gap-4 border-t border-line pt-8">
{currentPage > 1 && (
<a
href={`/made-to-order?page=${currentPage - 1}`}
className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper"
>
← Previous
</a>
)}
<p className="text-sm text-muted">
Page {currentPage} of {totalPages}
</p>
{currentPage < totalPages && (
<a
href={`/made-to-order?page=${currentPage + 1}`}
className="border border-ink px-4 py-2 text-sm hover:border-clay hover:bg-clay hover:text-paper"
>
Next →
</a>
)}
</div>
)}
</div>
)}
</div>
</div>
);
}
src/components/LoadingSpinner.tsx
-10
View File
@@ -1,10 +0,0 @@
export default function LoadingSpinner() {
return (
<div className="flex items-center justify-center py-24">
<div className="relative h-12 w-12">
<div className="absolute inset-0 rounded-full border-4 border-line"></div>
<div className="absolute inset-0 animate-spin rounded-full border-4 border-transparent border-t-ink"></div>
</div>
</div>
);
}