Reloading redesign

src/features/campaigns/CampaignFieldsPage.tsx

@@ -4,6 +4,7 @@ import Button from "../../components/Button";
 import Card from "../../components/Card";
 import FormField from "../../components/FormField";
 import PageTitle from "../../components/PageTitle";
+import LoadingFrame from "../../components/LoadingFrame";
 import ToggleSwitch from "../../components/ToggleSwitch";
 import { autosaveCampaignVersion } from "../../api/campaigns";
 import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
@@ -33,8 +34,9 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
 
   const version = data.currentVersion;
   const locked = isAuditLockedVersion(version);
-  const fields = useMemo(() => normalizeFields(draft?.fields), [draft?.fields]);
-  const globalValues = asRecord(draft?.global_values);
+  const displayDraft = draft ?? ensureCampaignDraft(null);
+  const fields = useMemo(() => normalizeFields(displayDraft.fields), [displayDraft.fields]);
+  const globalValues = asRecord(displayDraft.global_values);
   const fieldNameWarning = useMemo(() => describeFieldNameProblem(fields), [fields]);
   const canSave = dirty && !locked && Boolean(draft) && !fieldNameWarning;
 
@@ -193,7 +195,7 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
       {fieldNameWarning && <div className="alert warning">{fieldNameWarning}</div>}
       {locked && <div className="alert info">This version is read-only. {versionLockReason(version)} Copy the campaign before editing fields.</div>}
 
-      {draft && (
+      <LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
         <>
           <Card
             title="Fields and global values"
@@ -241,7 +243,7 @@ export default function CampaignFieldsPage({ settings, campaignId }: { settings:
             <Button variant="primary" onClick={() => saveDraft("manual")} disabled={!canSave}>Save</Button>
           </div>
         </>
-      )}
+      </LoadingFrame>
     </div>
   );
 }