From ee6a56fea7611aa7a11346f65e45cc8781ec8eb4 Mon Sep 17 00:00:00 2001
From: William Luke <williamluke4@gmail.com>
Date: Fri, 10 Apr 2026 10:59:07 +0300
Subject: [PATCH] fix: preserve layout wrapper in EditableImageOverlay when not
 editing

EditableImageOverlay returned a bare fragment when canEdit was false,
stripping the relative positioning context and className props that
children depend on for absolute positioning. This caused hero sections
on voucher and pool pages to break during loading before auth resolved.
Also adds skeleton placeholders for async content in both hero sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../pools/[address]/pool-client-page.tsx      | 42 ++++++++++++++++---
 src/components/editable-image-overlay.tsx     |  2 +-
 .../voucher/voucher-hero-section.tsx          | 15 ++++---
 src/components/voucher/voucher-home-tab.tsx   | 20 +++++++--
 4 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/src/app/(main)/pools/[address]/pool-client-page.tsx b/src/app/(main)/pools/[address]/pool-client-page.tsx
index 30ab7093..309a242a 100644
--- a/src/app/(main)/pools/[address]/pool-client-page.tsx
+++ b/src/app/(main)/pools/[address]/pool-client-page.tsx
@@ -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";
@@ -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();
@@ -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">
@@ -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>
@@ -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>
diff --git a/src/components/editable-image-overlay.tsx b/src/components/editable-image-overlay.tsx
index 676101a4..858ebeb0 100644
--- a/src/components/editable-image-overlay.tsx
+++ b/src/components/editable-image-overlay.tsx
@@ -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>) => {
diff --git a/src/components/voucher/voucher-hero-section.tsx b/src/components/voucher/voucher-hero-section.tsx
index 837854c6..c0d396f7 100644
--- a/src/components/voucher/voucher-hero-section.tsx
+++ b/src/components/voucher/voucher-hero-section.tsx
@@ -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";
@@ -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,
@@ -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">
diff --git a/src/components/voucher/voucher-home-tab.tsx b/src/components/voucher/voucher-home-tab.tsx
index 013c9cf7..0064178c 100644
--- a/src/components/voucher/voucher-home-tab.tsx
+++ b/src/components/voucher/voucher-home-tab.tsx
@@ -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";
@@ -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,
@@ -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">
@@ -161,7 +175,7 @@ export function VoucherHomeTab({
             )}
           </CardContent>
         </Card>
-      )}
+      ) : null}
 
       <Card>
         <CardContent className="p-6">