publish kind 9 quote after room content creation for cross-client interoperability

src/app/components/CalendarEventCreate.svelte

@@ -7,12 +7,13 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
 </script>
 
-<CalendarEventForm {url} {h}>
+<CalendarEventForm {url} {h} {shareToChat}>
   {#snippet header()}
     <ModalHeader>
       <ModalTitle>Create an Event</ModalTitle>

src/app/components/CalendarEventForm.svelte

@@ -3,7 +3,7 @@
   import {writable} from "svelte/store"
   import {randomId, HOUR} from "@welshman/lib"
   import {makeEvent, EVENT_TIME} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import {daysBetween} from "@lib/util"
   import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
@@ -22,7 +22,7 @@
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
   import {pushToast} from "@app/util/toast"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
 
   type Values = {
     d: string
@@ -36,11 +36,12 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
     header: Snippet
     initialValues?: Values
   }
 
-  let {url, h, header, initialValues}: Props = $props()
+  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`calendar:${url}:${h ?? ""}`)
 
@@ -57,7 +58,7 @@
   const selectFiles = () => editor.then(ed => ed.chain().selectFiles().run())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return
 
     if (!title) {
       return pushToast({
@@ -92,22 +93,42 @@
       ...ed.storage.nostr.getEditorTags(),
     ]
 
-    if (await shouldProtect) {
-      tags.push(PROTECTED)
+    loading = true
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      const event = makeEvent(EVENT_TIME, {content, tags})
+      const calendarThunk = publishThunk({event, relays: [url]})
+      const error = await waitForThunkError(calendarThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: calendarThunk.event, protect})
+      }
+
+      pushToast({message: "Your event has been saved!"})
+    } finally {
+      loading = false
     }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    const event = makeEvent(EVENT_TIME, {content, tags})
-
-    pushToast({message: "Your event has been saved!"})
-    publishThunk({event, relays: [url]})
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   const d = $state(initialValues?.d ?? randomId())
   let title = $state(initialValues?.title ?? "")
   let location = $state(initialValues?.location ?? "")
@@ -158,7 +179,11 @@
           <div class="input-editor grow overflow-hidden">
             <EditorContent {editor} />
           </div>
-          <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
+          <Button
+            data-tip="Add an image"
+            class="center btn tooltip"
+            onclick={selectFiles}
+            disabled={loading}>
             {#if $uploading}
               <span class="loading loading-spinner loading-xs"></span>
             {:else}
@@ -197,12 +222,12 @@
     </Field>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={$uploading}>
-      <Spinner loading={$uploading}>Save Event</Spinner>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
+      <Spinner loading={$uploading || loading}>Save Event</Spinner>
     </Button>
   </ModalFooter>
 </Modal>

src/app/components/ClassifiedCreate.svelte

@@ -7,12 +7,13 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
 </script>
 
-<ClassifiedForm {url} {h}>
+<ClassifiedForm {url} {h} {shareToChat}>
   {#snippet header()}
     <ModalHeader>
       <ModalTitle>Create a Classified Listing</ModalTitle>

src/app/components/ClassifiedForm.svelte

@@ -2,7 +2,7 @@
   import type {Snippet} from "svelte"
   import {removeUndefined, randomId, uniq} from "@welshman/lib"
   import {makeEvent, CLASSIFIED} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
   import {normalizeTopic} from "@lib/util"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -21,7 +21,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70, uploadFile} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote, uploadFile} from "@app/core/commands"
 
   type Values = {
     d: string
@@ -37,11 +37,12 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
     header: Snippet
     initialValues?: Values
   }
 
-  let {url, h, header, initialValues}: Props = $props()
+  let {url, h, shareToChat = false, header, initialValues}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`classified:${url}:${h ?? ""}`)
 
@@ -87,7 +88,9 @@
         tags.push(["t", topic])
       }
 
-      if (await shouldProtect) {
+      const protect = await shouldProtect
+
+      if (protect) {
         tags.push(PROTECTED)
       }
 
@@ -114,13 +117,23 @@
         }
       }
 
-      publishThunk({
+      const classifiedThunk = publishThunk({
         relays: [url],
         event: makeEvent(CLASSIFIED, {content, tags}),
       })
 
+      const error = await waitForThunkError(classifiedThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
       draftKey.clear()
       history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: classifiedThunk.event, protect})
+      }
     } finally {
       loading = false
     }

src/app/components/ComposeMenu.svelte

@@ -22,15 +22,15 @@
 
   const {url, h, onClick}: Props = $props()
 
-  const createGoal = () => pushModal(GoalCreate, {url, h})
+  const createGoal = () => pushModal(GoalCreate, {url, h, shareToChat: true})
 
-  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h})
+  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h, shareToChat: true})
 
-  const createThread = () => pushModal(ThreadCreate, {url, h})
+  const createThread = () => pushModal(ThreadCreate, {url, h, shareToChat: true})
 
-  const createClassified = () => pushModal(ClassifiedCreate, {url, h})
+  const createClassified = () => pushModal(ClassifiedCreate, {url, h, shareToChat: true})
 
-  const createPoll = () => pushModal(PollCreate, {url, h})
+  const createPoll = () => pushModal(PollCreate, {url, h, shareToChat: true})
 
   let ul: Element
 

src/app/components/ContentQuote.svelte

@@ -49,7 +49,7 @@
         <NoteContentMinimal trimParent {url} event={$quote} />
       </div>
     {:else}
-      <NoteCard event={$quote} {url} class="bg-alt rounded-box p-4">
+      <NoteCard noShadow event={$quote} {url} class="bg-alt rounded-box p-4">
         <NoteContentMinimal {url} event={$quote} />
       </NoteCard>
     {/if}

src/app/components/EventReply.svelte

@@ -68,7 +68,7 @@
     })
 
     const observer = new ResizeObserver(() => {
-      spacer!.style.minHeight = `${form!.offsetHeight}px`
+      spacer!.style.minHeight = `${form!.offsetHeight + 60}px`
     })
 
     observer.observe(form!)
@@ -84,7 +84,7 @@
   in:fly
   bind:this={form}
   onsubmit={preventDefault(submit)}
-  class="left-content bottom-sai right-sai ml-2 pl-2 fixed z-feature">
+  class="left-content bottom-sai right-sai fixed z-feature mb-14 md:mb-0 w-full md:w-auto pr-2">
   <div class="card2 mx-2 my-2 bg-alt shadow-md">
     <div class="relative">
       <div class="note-editor grow overflow-hidden">

src/app/components/GoalCreate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {writable} from "svelte/store"
   import {makeEvent, ZAP_GOAL} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
@@ -10,6 +10,7 @@
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
@@ -21,7 +22,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
 
   type Values = {
     title: string
@@ -33,9 +34,10 @@
     url: string
     h?: string
     initialValues?: Values
+    shareToChat?: boolean
   }
 
-  let {url, h, initialValues}: Props = $props()
+  let {url, h, initialValues, shareToChat = false}: Props = $props()
 
   const draftKey = new DraftKey<Values>(`goal:${url}:${h ?? ""}`)
 
@@ -52,7 +54,7 @@
   const selectFiles = () => editor.then(ed => ed.commands.selectFiles())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return
 
     if (!title) {
       return pushToast({
@@ -78,23 +80,43 @@
       ["relays", url],
     ]
 
-    if (await shouldProtect) {
-      tags.push(PROTECTED)
+    loading = true
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      const goalThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(ZAP_GOAL, {content: title, tags}),
+      })
+
+      const error = await waitForThunkError(goalThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: goalThunk.event, protect})
+      }
+    } finally {
+      loading = false
     }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(ZAP_GOAL, {content: title, tags}),
-    })
-
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   let title = $state(initialValues?.title ?? "")
   let amount = $state(initialValues?.amount ?? 1000)
   let content = $state(initialValues?.content ?? "")
@@ -154,7 +176,8 @@
         <Button
           data-tip="Add an image"
           class="tooltip tooltip-left absolute bottom-1 right-2"
-          onclick={selectFiles}>
+          onclick={selectFiles}
+          disabled={loading}>
           {#if $uploading}
             <span class="loading loading-spinner loading-xs"></span>
           {:else}
@@ -169,16 +192,16 @@
           {/snippet}
           {#snippet input()}
             <div class="flex grow justify-end">
-              <label class="input input-bordered flex items-center gap-2">
+              <label class="input input-bordered flex w-auto items-center gap-2">
                 <Icon icon={Bolt} />
-                <input bind:value={amount} type="number" class="w-28" />
-                <p class="opacity-50">sats</p>
+                <input bind:value={amount} type="number" class="w-28 grow" />
+                <p class="shrink-0 opacity-50">sats</p>
               </label>
             </div>
           {/snippet}
         </FieldInline>
         <input
-          class="range range-primary -mt-2"
+          class="range range-primary -mt-2 w-full"
           type="range"
           min="1000"
           max="100000"
@@ -188,10 +211,12 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Goal</Button>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
+      <Spinner {loading}>Create Goal</Spinner>
+    </Button>
   </ModalFooter>
 </Modal>

src/app/components/NoteCard.svelte

@@ -16,6 +16,7 @@
     children,
     minimal = false,
     hideProfile = false,
+    noShadow = false,
     url,
     ...restProps
   }: {
@@ -23,6 +24,7 @@
     children: Snippet
     minimal?: boolean
     hideProfile?: boolean
+    noShadow?: boolean
     url?: string
     class?: string
   } = $props()
@@ -34,7 +36,7 @@
   let muted = $state($isEventMuted(event))
 </script>
 
-<div class="flex flex-col gap-2 shadow-md {restProps.class}">
+<div class="flex flex-col gap-2 {restProps.class}" class:shadow-md={!noShadow}>
   {#if muted}
     <div class="flex items-center justify-between">
       <div class="row-2 relative">

src/app/components/PollCreate.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {insertAt, now, randomId, removeAt, removeUndefined} from "@welshman/lib"
   import {makeEvent} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {Poll} from "nostr-tools/kinds"
   import {isMobile, preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
@@ -13,6 +13,7 @@
   import FieldInline from "@lib/components/FieldInline.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
@@ -21,7 +22,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
   import {DraftKey} from "@app/util/drafts"
   import type {PollType} from "@app/util/polls"
 
@@ -40,9 +41,10 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
   const draftKey = new DraftKey<Values>(`poll:${url}:${h ?? ""}`)
   const initialValues = draftKey.get()
 
@@ -102,6 +104,8 @@
   }
 
   const submit = async () => {
+    if (loading) return
+
     if (!title.trim()) {
       return pushToast({theme: "error", message: "Please provide a title for your poll."})
     }
@@ -130,19 +134,39 @@
       tags.push(["h", h])
     }
 
-    if (await shouldProtect) {
-      tags.push(PROTECTED)
+    loading = true
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      const pollThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(Poll, {content: title.trim(), tags}),
+      })
+
+      const error = await waitForThunkError(pollThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: pollThunk.event, protect})
+      }
+    } finally {
+      loading = false
     }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(Poll, {content: title.trim(), tags}),
-    })
-
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   let draggedOptionId = $state<string | undefined>()
   let title = $state(initialValues?.title ?? "")
   let pollType = $state<PollType>(initialValues?.pollType ?? "singlechoice")
@@ -246,10 +270,12 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Poll</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Create Poll</Spinner>
+    </Button>
   </ModalFooter>
 </Modal>

src/app/components/ProfileBadges.svelte

@@ -5,11 +5,11 @@
   import type {Filter} from "@welshman/util"
   import {deriveEventsDesc, deriveEventsById} from "@welshman/store"
   import {formatTimestampRelative} from "@welshman/lib"
-  import {NOTE, ROOMS, COMMENT} from "@welshman/util"
+  import {NOTE, ROOMS, COMMENT, MESSAGE} from "@welshman/util"
   import {repository, loadRelayList} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import ProfileSpaces from "@app/components/ProfileSpaces.svelte"
-  import {deriveGroupList, getSpaceUrlsFromGroupList, MESSAGE_KINDS} from "@app/core/state"
+  import {deriveGroupList, getSpaceUrlsFromGroupList} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
 
@@ -36,7 +36,7 @@
     load({
       filters: [
         {authors: [pubkey], kinds: [ROOMS]},
-        {authors: [pubkey], limit: 1, kinds: [NOTE, COMMENT, ...MESSAGE_KINDS]},
+        {authors: [pubkey], limit: 1, kinds: [NOTE, COMMENT, MESSAGE]},
       ],
       relays: Router.get().FromPubkeys([pubkey]).getUrls(),
     })

src/app/components/RoomItemContent.svelte

@@ -8,14 +8,9 @@
   import {getRoomItemPath} from "@app/util/routes"
 
   const props: ComponentProps<typeof NoteContent> = $props()
-  const MESSAGE_MIN_LENGTH = 5000
-  const MESSAGE_MAX_LENGTH = 5500
-
   const path = getRoomItemPath(props.url!, props.event)
-  const minLength =
-    props.minLength ?? (props.event.kind === MESSAGE ? MESSAGE_MIN_LENGTH : undefined)
-  const maxLength =
-    props.maxLength ?? (props.event.kind === MESSAGE ? MESSAGE_MAX_LENGTH : undefined)
+  const minLength = 5000
+  const maxLength = 5500
 </script>
 
 <div class={cx("text-sm", {"card2 card2-sm bg-alt": props.event.kind !== MESSAGE})}>

src/app/components/ThreadCreate.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import {writable} from "svelte/store"
   import {makeEvent, THREAD} from "@welshman/util"
-  import {publishThunk} from "@welshman/app"
+  import {publishThunk, waitForThunkError} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
   import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
@@ -19,7 +20,7 @@
   import {PROTECTED} from "@app/core/state"
   import {makeEditor} from "@app/editor"
   import {DraftKey} from "@app/util/drafts"
-  import {canEnforceNip70} from "@app/core/commands"
+  import {canEnforceNip70, publishRoomQuote} from "@app/core/commands"
 
   type Values = {
     content?: string | object
@@ -29,9 +30,10 @@
   type Props = {
     url: string
     h?: string
+    shareToChat?: boolean
   }
 
-  const {url, h}: Props = $props()
+  const {url, h, shareToChat = false}: Props = $props()
   const draftKey = new DraftKey<Values>(`thread:${url}:${h ?? ""}`)
   const initialValues = draftKey.get()
   const shouldProtect = canEnforceNip70(url)
@@ -43,7 +45,7 @@
   const selectFiles = () => editor.then(ed => ed.commands.selectFiles())
 
   const submit = async () => {
-    if ($uploading) return
+    if ($uploading || loading) return
 
     if (!title) {
       return pushToast({
@@ -64,23 +66,43 @@
 
     const tags = [...ed.storage.nostr.getEditorTags(), ["title", title]]
 
-    if (await shouldProtect) {
-      tags.push(PROTECTED)
+    loading = true
+
+    try {
+      const protect = await shouldProtect
+
+      if (protect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      const threadThunk = publishThunk({
+        relays: [url],
+        event: makeEvent(THREAD, {content, tags}),
+      })
+
+      const error = await waitForThunkError(threadThunk)
+
+      if (error) {
+        return pushToast({theme: "error", message: error})
+      }
+
+      draftKey.clear()
+      history.back()
+
+      if (shareToChat) {
+        publishRoomQuote({url, h, parent: threadThunk.event, protect})
+      }
+    } finally {
+      loading = false
     }
-
-    if (h) {
-      tags.push(["h", h])
-    }
-
-    publishThunk({
-      relays: [url],
-      event: makeEvent(THREAD, {content, tags}),
-    })
-
-    draftKey.clear()
-    history.back()
   }
 
+  let loading = $state(false)
+
   let title = $state(initialValues?.title ?? "")
   let content = $state(initialValues?.content ?? "")
 
@@ -138,7 +160,8 @@
       <Button
         data-tip="Add an image"
         class="tooltip tooltip-left absolute bottom-1 right-2"
-        onclick={selectFiles}>
+        onclick={selectFiles}
+        disabled={loading}>
         {#if $uploading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}
@@ -148,10 +171,12 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Thread</Button>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
+      <Spinner {loading}>Create Thread</Spinner>
+    </Button>
   </ModalFooter>
 </Modal>