diff --git a/apps/web/src/features/sharing/components/SharePanel.tsx b/apps/web/src/features/sharing/components/SharePanel.tsx
index b4da0a8..a8e2fa7 100644
--- a/apps/web/src/features/sharing/components/SharePanel.tsx
+++ b/apps/web/src/features/sharing/components/SharePanel.tsx
@@ -1,5 +1,6 @@
 import { useStore as useFormStore } from '@tanstack/react-form'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
 import { api, json, read } from '../../../shared/api.ts'
 import { useAppForm } from '../../../shared/form.tsx'
 import { ErrorAlert } from '../../../shared/ui/Alert.tsx'
@@ -37,21 +38,19 @@ export function SharePanel(props: Props) {
   const settings = useQuery(sharingQuery(props.skey))
   if (settings.error)
     return (
-      <PanelCard title="Sharing" className={props.className}>
+      <SharingCard onClose={props.onClose} className={props.className}>
         <ErrorAlert error={settings.error} size="sm" className="w-full" />
-        <CloseButton onClose={props.onClose} />
-      </PanelCard>
+      </SharingCard>
     )
   if (!settings.data)
     return (
-      <PanelCard title="Sharing" className={props.className}>
+      <SharingCard onClose={props.onClose} className={props.className}>
         {/* The mode's select and Save, on their way. */}
         <Loading label="Loading sharing" className="flex min-w-48 flex-1 gap-2">
           <Skeleton className="h-8.5 flex-1" />
           <Skeleton className="h-8.5 w-14" />
         </Loading>
-        <CloseButton onClose={props.onClose} />
-      </PanelCard>
+      </SharingCard>
     )
   return (
     <SharingForm
@@ -120,7 +119,7 @@ function SharingForm(props: SharingFormProps) {
           {mode !== 'private' && (
             <Input aria-label="Link" readOnly value={props.link} className="min-w-48 flex-1" />
           )}
-          <CloseButton onClose={props.onClose} />
+          <Button onClick={props.onClose}>Close</Button>
           <ErrorAlert error={save.error} size="sm" className="w-full" />
         </PanelCard>
       </form.Form>
@@ -128,10 +127,19 @@ function SharingForm(props: SharingFormProps) {
   )
 }
 
-interface CloseButtonProps {
+interface SharingCardProps {
   onClose: () => void
+  className?: string
+  /** What stands in for the form: why it couldn't load, or its controls on their way. */
+  children: ReactNode
 }
 
-function CloseButton(props: CloseButtonProps) {
-  return <Button onClick={props.onClose}>Close</Button>
+/** The sharing panel before its form can show, with Close after what it holds. */
+function SharingCard(props: SharingCardProps) {
+  return (
+    <PanelCard title="Sharing" className={props.className}>
+      {props.children}
+      <Button onClick={props.onClose}>Close</Button>
+    </PanelCard>
+  )
 }