Skip to content

fix: broken layout during loading on voucher and pool pages #394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
williamluke4 merged 1 commit into from
Apr 10, 2026
+64 −15
Merged

fix: broken layout during loading on voucher and pool pages #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 36 additions & 6 deletions src/app/(main)/pools/[address]/pool-client-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { EditableImageOverlay } from "~/components/editable-image-overlay";
import { ContentContainer } from "~/components/layout/content-container";
import { useSwapPool } from "~/components/pools/hooks";
import { Badge } from "~/components/ui/badge";
import { Skeleton } from "~/components/ui/skeleton";
import { useAuth } from "~/hooks/use-auth";
import { useIsContractOwner } from "~/hooks/use-is-owner";
import { trpc } from "~/lib/trpc";
Expand All @@ -22,7 +23,7 @@ export function PoolClientPage() {
const { address } = useParams<{ address: string }>();
const pool_address = getAddress(address);
const { data: pool } = useSwapPool(pool_address);
const { data: metadata } = trpc.pool.get.useQuery(pool_address);
const { data: metadata, isLoading: isMetadataLoading } = trpc.pool.get.useQuery(pool_address);

const isOwner = useIsContractOwner(pool_address);
const auth = useAuth();
Expand Down Expand Up @@ -143,7 +144,13 @@ export function PoolClientPage() {
</div>
</div>
{/* Tags */}
{metadata?.tags && metadata.tags.length > 0 && (
{isMetadataLoading ? (
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-5 bg-white/20 rounded" />
<Skeleton className="h-6 w-16 bg-white/20 rounded-full" />
<Skeleton className="h-6 w-20 bg-white/20 rounded-full" />
</div>
) : metadata?.tags && metadata.tags.length > 0 ? (
<div className="flex flex-wrap items-center gap-2">
<TagIcon className="h-5 w-5 text-white/80" />
<div className="flex flex-wrap gap-2">
Expand All @@ -158,14 +165,19 @@ export function PoolClientPage() {
))}
</div>
</div>
)}
) : null}

{/* Description */}
{metadata?.swap_pool_description && (
{isMetadataLoading ? (
<div className="space-y-2 max-w-2xl">
<Skeleton className="h-5 w-full bg-white/20" />
<Skeleton className="h-5 w-3/4 bg-white/20" />
</div>
) : metadata?.swap_pool_description ? (
<p className="text-lg sm:text-xl text-white/90 max-w-2xl leading-relaxed">
{metadata.swap_pool_description}
</p>
)}
) : null}

{/* Action Buttons */}
<div className="pt-2 ">{pool && <PoolButtons pool={pool} />}</div>
Expand All @@ -180,8 +192,26 @@ export function PoolClientPage() {

{/* Modern Tabs Section */}
<div className="mt-12">
{metadata && pool && (
{metadata && pool ? (
<PoolTabs pool={pool} isOwner={isOwner} metadata={metadata} />
) : (
<div className="space-y-8">
<div className="border-b border-gray-200 bg-white rounded-2xl overflow-hidden">
<div className="hidden md:flex gap-2 p-1">
{Array.from({ length: 6 }).map((_, i) => (
<Skeleton key={i} className="h-9 w-24 rounded-md" />
))}
</div>
<div className="md:hidden p-2">
<Skeleton className="h-14 w-full rounded-md" />
</div>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
{Array.from({ length: 8 }).map((_, i) => (
<Skeleton key={i} className="h-48 rounded-lg" />
))}
</div>
</div>
)}
</div>
</ContentContainer>
Expand Down
2 changes: 1 addition & 1 deletion src/components/editable-image-overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function EditableImageOverlay({
const { uploadFile } = useFileUpload();

if (!canEdit) {
return <>{children}</>;
return <div className={cn("relative", className)}>{children}</div>;
}

const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
Expand Down
15 changes: 10 additions & 5 deletions src/components/voucher/voucher-hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Image from "next/image";
import { toast } from "sonner";
import { EditableImageOverlay } from "~/components/editable-image-overlay";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import { Skeleton } from "~/components/ui/skeleton";
import { BasicVoucherFunctions } from "~/components/voucher/voucher-contract-functions";
import { useAuth } from "~/hooks/use-auth";
import { trpc } from "~/lib/trpc";
Expand All @@ -24,7 +25,7 @@ export function VoucherHeroSection({
}: VoucherHeroSectionProps) {
const auth = useAuth();
const utils = trpc.useUtils();
const { data: voucher } = trpc.voucher.byAddress.useQuery(
const { data: voucher, isLoading } = trpc.voucher.byAddress.useQuery(
{ voucherAddress: address },
{
enabled: !!address,
Expand Down Expand Up @@ -130,25 +131,29 @@ export function VoucherHeroSection({
<p className="text-xl sm:text-2xl text-white/90">
{details?.symbol}
</p>
{voucher?.voucher_type && (
{isLoading ? (
<Skeleton className="h-6 w-20 bg-white/20" />
) : voucher?.voucher_type ? (
<VoucherTypeTag
type={voucher?.voucher_type}
address={address}
/>
)}
) : null}
</div>
</div>
</div>

{/* Voucher Value */}
{voucher?.voucher_value && voucher?.voucher_uoa && (
{isLoading ? (
<Skeleton className="h-12 w-64 bg-white/20 rounded-lg" />
) : voucher?.voucher_value && voucher?.voucher_uoa ? (
<div className="inline-block px-6 py-3 bg-white/20 backdrop-blur-xs rounded-lg border border-white/20">
<p className="font-semibold text-white">
1 {details?.symbol} = {voucher.voucher_value}{" "}
{voucher.voucher_uoa} of Products
</p>
</div>
)}
) : null}

{/* Action Buttons */}
<div className="pt-4">
Expand Down
20 changes: 17 additions & 3 deletions src/components/voucher/voucher-home-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Link from "next/link";
import { useState } from "react";
import { OfferList } from "~/components/products/offer-list";
import { Card, CardContent } from "~/components/ui/card";
import { Skeleton } from "~/components/ui/skeleton";
import { useContractSinkAddress } from "~/hooks/use-sink-address";
import { useContractOwner } from "~/hooks/use-is-owner";
import { trpc } from "~/lib/trpc";
Expand All @@ -21,7 +22,7 @@ export function VoucherHomeTab({
}: VoucherHomeTabProps) {
const [showSigners, setShowSigners] = useState(false);

const { data: voucher } = trpc.voucher.byAddress.useQuery(
const { data: voucher, isLoading } = trpc.voucher.byAddress.useQuery(
{ voucherAddress },
{
enabled: !!voucherAddress,
Expand All @@ -35,7 +36,20 @@ export function VoucherHomeTab({
);
return (
<div className="space-y-4">
{voucher?.voucher_description && (
{isLoading ? (
<Card>
<CardContent className="pt-6 space-y-3">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-3/4" />
<div className="flex flex-wrap gap-2 pt-3 border-t mt-4">
<Skeleton className="h-7 w-32 rounded-md" />
<Skeleton className="h-7 w-20 rounded-md" />
<Skeleton className="h-7 w-40 rounded-md" />
</div>
</CardContent>
</Card>
) : voucher?.voucher_description ? (
<Card>
<CardContent className="pt-6">
<p className="text-sm leading-relaxed text-gray-700 whitespace-pre-wrap mb-4">
Expand Down Expand Up @@ -161,7 +175,7 @@ export function VoucherHomeTab({
)}
</CardContent>
</Card>
)}
) : null}

<Card>
<CardContent className="p-6">
Expand Down
Loading