Reloading redesign

src/features/campaigns/MailSettingsPage.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 { listImapFolders, testImapSettings, testSmtpSettings, type MailConnectionTestResponse, type MailImapFolderListResponse, type MailSecurity } from "../../api/mail";
@@ -27,10 +28,11 @@ export default function MailSettingsPage({ settings, campaignId }: { settings: A
 
   const version = data.currentVersion;
   const locked = isAuditLockedVersion(version);
-  const server = asRecord(draft?.server);
+  const displayDraft = draft ?? ensureCampaignDraft(null);
+  const server = asRecord(displayDraft.server);
   const smtp = asRecord(server.smtp);
   const imap = asRecord(server.imap);
-  const delivery = asRecord(draft?.delivery);
+  const delivery = asRecord(displayDraft.delivery);
   const imapAppend = asRecord(delivery.imap_append_sent);
   const imapEnabled = getBool(imap, "enabled");
   const imapDisabled = locked || !imapEnabled;
@@ -189,7 +191,7 @@ export default function MailSettingsPage({ settings, campaignId }: { settings: A
       {localError && <div className="alert danger">{localError}</div>}
       {locked && <div className="alert info">This version is read-only. {versionLockReason(version)} Copy the campaign before editing server settings.</div>}
 
-      {draft && (
+      <LoadingFrame loading={loading || !draft} label="Loading campaign draft…">
         <>
           <Card title="Mail server settings">
             <div className="mail-server-settings-grid">
@@ -245,7 +247,7 @@ export default function MailSettingsPage({ settings, campaignId }: { settings: A
             <Button variant="primary" onClick={() => saveDraft("manual")} disabled={!dirty || locked}>Save</Button>
           </div>
         </>
-      )}
+      </LoadingFrame>
     </div>
   );
 }