diff --git a/packages/iios-messaging-ui/package.json b/packages/iios-messaging-ui/package.json index 69ac4b7..a36ef95 100644 --- a/packages/iios-messaging-ui/package.json +++ b/packages/iios-messaging-ui/package.json @@ -1,6 +1,6 @@ { "name": "@insignia/iios-messaging-ui", - "version": "0.1.1", + "version": "0.1.2", "type": "module", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/iios-messaging-ui/src/components/composer.tsx b/packages/iios-messaging-ui/src/components/composer.tsx index 56c50ec..0437cfa 100644 --- a/packages/iios-messaging-ui/src/components/composer.tsx +++ b/packages/iios-messaging-ui/src/components/composer.tsx @@ -38,6 +38,7 @@ export function Composer({ const [sending, setSending] = useState(false); const [staged, setStaged] = useState(null); const [uploading, setUploading] = useState(false); + const [uploadingName, setUploadingName] = useState(null); const fileRef = useRef(null); const query = trailingMentionQuery(draft); @@ -59,12 +60,14 @@ export function Composer({ e.target.value = ''; if (!file) return; setUploading(true); + setUploadingName(file.name); try { setStaged(await upload(file)); } catch { /* host surfaces upload errors */ } finally { setUploading(false); + setUploadingName(null); } } @@ -110,7 +113,11 @@ export function Composer({ ))} ) : null} - {staged ? ( + {uploading && uploadingName ? ( +
+
+ ) : staged ? (
📎 {staged.name}
{attachErr ?
{attachErr}
: null} - {pending ? ( + {attaching && uploadingName ? ( +
+ +
+ ) : pending ? (
📎 {pending.filename ?? 'attachment'}{pending.sizeBytes ? ` · ${fmtBytes(pending.sizeBytes)}` : ''} @@ -232,6 +239,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () => const [err, setErr] = useState(null); const [attachments, setAttachments] = useState([]); const [attaching, setAttaching] = useState(false); + const [uploadingName, setUploadingName] = useState(null); const fileRef = useRef(null); const filtered = compose.directory.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase())); @@ -242,6 +250,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () => e.target.value = ''; if (!file || attachments.length >= 10) return; setAttaching(true); + setUploadingName(file.name); setErr(null); try { const ref = await compose.upload(file); @@ -250,6 +259,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () => setErr(e2 instanceof Error ? e2.message : String(e2)); } finally { setAttaching(false); + setUploadingName(null); } } @@ -323,9 +333,14 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () => ))} + {attaching && uploadingName ? ( + + + + ) : null}
diff --git a/packages/iios-messaging-ui/src/styles.css b/packages/iios-messaging-ui/src/styles.css index 68f0d5f..34e0776 100644 --- a/packages/iios-messaging-ui/src/styles.css +++ b/packages/iios-messaging-ui/src/styles.css @@ -368,6 +368,25 @@ button.miu-attach-dl:hover { align-items: center; gap: 6px; } +.miu-attach-chip.is-uploading, +.miu-staged.is-uploading { + color: var(--miu-muted); +} +.miu-spinner { + display: inline-block; + width: 12px; + height: 12px; + border: 2px solid var(--miu-border); + border-top-color: var(--miu-accent); + border-radius: 50%; + animation: miu-spin 0.7s linear infinite; +} +@keyframes miu-spin { + to { transform: rotate(360deg); } +} +@media (prefers-reduced-motion: reduce) { + .miu-spinner { animation-duration: 2s; } +} .miu-attach-x { border: none; background: none;