fix(client): render work view immediately, load metadata lazily

The work detail view was gated entirely on metadata loading — when
metadata required an IPFS fetch (up to 30s timeout), users saw a full
skeleton even though work title, status, garden info, and media URLs
were already cached.

Now the view renders immediately with all available data. Only the
metadata details section shows skeleton placeholders while loading,
so images and other content appear instantly on navigation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Oba-One

packages/client/src/components/Features/Work/WorkView.tsx

@@ -26,6 +26,8 @@ type WorkViewProps = {
   actionTitle: string;
   media?: string[];
   details: Array<{ label: string; value: string; icon?: IconComponent | null }>;
+  /** When true, shows skeleton placeholders for details instead of the actual cards */
+  isDetailsLoading?: boolean;
   headerIcon?: IconComponent | null;
   primaryActions?: WorkViewAction[]; // shown near header or under details
   feedbackSection?: React.ReactNode; // optional feedback input section
@@ -51,6 +53,7 @@ export const WorkView: React.FC<WorkViewProps> = ({
   actionTitle,
   media = [],
   details,
+  isDetailsLoading = false,
   headerIcon: HeaderIcon,
   primaryActions = [],
   feedbackSection,
@@ -122,16 +125,24 @@ export const WorkView: React.FC<WorkViewProps> = ({
         Icon={RiExternalLinkLine}
       />
 
-      {details
-        .filter((d) => d.value && d.value.trim().length > 0)
-        .map((d) => (
-          <FormCard
-            key={d.label}
-            label={d.label}
-            value={d.value}
-            Icon={d.icon ?? RiExternalLinkLine}
-          />
-        ))}
+      {isDetailsLoading ? (
+        <div className="space-y-2">
+          {Array.from({ length: 2 }).map((_, i) => (
+            <div key={`detail-loading-${i}`} className="h-12 bg-bg-weak-50 rounded-lg animate-pulse" />
+          ))}
+        </div>
+      ) : (
+        details
+          .filter((d) => d.value && d.value.trim().length > 0)
+          .map((d) => (
+            <FormCard
+              key={d.label}
+              label={d.label}
+              value={d.value}
+              Icon={d.icon ?? RiExternalLinkLine}
+            />
+          ))
+      )}
 
       {feedbackSection}
 

packages/client/src/views/Home/Garden/Work.tsx

@@ -515,7 +515,6 @@ export const GardenWork: React.FC = () => {
       </article>
     );
 
-  const isMetadataLoading = metadataStatus === "loading" || metadataStatus === "idle";
   const hasMedia = Array.isArray(work.media) && work.media.length > 0;
   const resolvedActionTitle =
     actionTitle ??
@@ -824,27 +823,22 @@ export const GardenWork: React.FC = () => {
     <article>
       <TopNav onBackClick={handleBack} overlay />
       <div className="padded pt-20">
-        {isMetadataLoading ? (
-          <WorkViewSkeleton showMedia showActions={false} numDetails={3} />
-        ) : (
-          <>
-            <WorkViewSection
-              garden={garden}
-              work={work}
-              workMetadata={workMetadata}
-              viewingMode={viewingMode}
-              actionTitle={resolvedActionTitle}
-              effectiveStatus={effectiveStatus}
-              onDownloadData={handleDownloadData}
-              onDownloadMedia={hasMedia ? handleDownloadMedia : undefined}
-              onShare={handleShare}
-              onViewAttestation={canViewAttestation ? handleViewAttestation : undefined}
-              footer={retryFooter || approvalFooter || successFooter}
-              reserveFooterSpace={Boolean(retryFooter || approvalFooter || successFooter)}
-              footerSpacerClassName="h-[calc(112px+env(safe-area-inset-bottom))]"
-            />
-          </>
-        )}
+        <WorkViewSection
+          garden={garden}
+          work={work}
+          workMetadata={workMetadata}
+          metadataStatus={metadataStatus}
+          viewingMode={viewingMode}
+          actionTitle={resolvedActionTitle}
+          effectiveStatus={effectiveStatus}
+          onDownloadData={handleDownloadData}
+          onDownloadMedia={hasMedia ? handleDownloadMedia : undefined}
+          onShare={handleShare}
+          onViewAttestation={canViewAttestation ? handleViewAttestation : undefined}
+          footer={retryFooter || approvalFooter || successFooter}
+          reserveFooterSpace={Boolean(retryFooter || approvalFooter || successFooter)}
+          footerSpacerClassName="h-[calc(112px+env(safe-area-inset-bottom))]"
+        />
 
         {metadataStatus === "error" && (
           <div className="mt-4 rounded-xl border border-error-light bg-error-lighter px-4 py-3 flex items-start gap-3">

packages/client/src/views/Home/Garden/WorkViewSection.tsx

@@ -23,10 +23,13 @@ import { WorkView, type WorkViewAction } from "@/components/Features/Work";
 
 type ViewingMode = "operator" | "gardener" | "viewer";
 
+type MetadataStatus = "idle" | "loading" | "success" | "error";
+
 type WorkViewSectionProps = {
   garden?: Garden;
   work: Work;
   workMetadata: WorkMetadata | null;
+  metadataStatus?: MetadataStatus;
   viewingMode: ViewingMode;
   actionTitle: string;
   effectiveStatus: WorkDisplayStatus;
@@ -168,6 +171,7 @@ export const WorkViewSection: React.FC<WorkViewSectionProps> = ({
   garden,
   work,
   workMetadata,
+  metadataStatus = "success",
   viewingMode,
   actionTitle,
   effectiveStatus,
@@ -387,6 +391,8 @@ export const WorkViewSection: React.FC<WorkViewSectionProps> = ({
     return items;
   }, [metadataDetails, workFeedback, intl]);
 
+  const isDetailsLoading = metadataStatus === "loading" || metadataStatus === "idle";
+
   return (
     <WorkView
       title={getTitle()}
@@ -395,6 +401,7 @@ export const WorkViewSection: React.FC<WorkViewSectionProps> = ({
       actionTitle={actionTitle}
       media={media}
       details={allDetails}
+      isDetailsLoading={isDetailsLoading}
       headerIcon={RiCheckDoubleFill}
       primaryActions={primaryActions}
       footer={footer}