diff --git a/src/App.vue b/src/App.vue
index 2d6d4fc..5ee34d7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -136,9 +136,9 @@ button {
}
&[disabled] {
- background-color: #ddd !important;
+ background-color: $btn-disabled-background-color !important;
box-shadow: none;
- color: #999 !important;
+ color: $btn-disabled-text-color !important;
cursor: initial;
}
}
diff --git a/src/components/PostEditor.vue b/src/components/PostEditor.vue
index 1004348..01dc1a8 100644
--- a/src/components/PostEditor.vue
+++ b/src/components/PostEditor.vue
@@ -67,6 +67,7 @@
type="submit"
v-if="inReplyTo"
class="submit-btn-small"
+ :disabled="!canPublish()"
@click.prevent="publish()"
>
Publish
@@ -78,7 +79,7 @@
@@ -130,6 +131,7 @@ let attachment = $ref(null)
let visibility = $ref(Visibility.Public)
let visibilityMenuVisible = $ref(false)
+let isLoading = $ref(false)
let errorMessage = $ref(null)
const author = $computed(() => {
@@ -192,6 +194,10 @@ function getCharacterCount(): number {
return (instance.post_character_limit - content.length)
}
+function canPublish(): boolean {
+ return getCharacterCount() >= 0 && !isLoading
+}
+
async function publish() {
const contentRendered = renderMarkdownLite(content)
const postData = {
@@ -200,6 +206,7 @@ async function publish() {
visibility: visibility,
mentions: [],
}
+ isLoading = true
let post
try {
post = await createPost(
@@ -209,10 +216,12 @@ async function publish() {
)
} catch (error: any) {
errorMessage = error.message
+ isLoading = false
return
}
// Refresh editor
errorMessage = null
+ isLoading = false
attachment = null
content = ""
if (postFormContentRef) {
@@ -288,6 +297,11 @@ textarea {
.submit-btn-small {
font-weight: bold;
margin-left: $block-inner-padding;
+
+ &[disabled] {
+ color: $btn-disabled-text-color;
+ cursor: initial;
+ }
}
}
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 1289dbf..cbd4dd6 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -26,6 +26,8 @@ $btn-border-radius: 8px;
$btn-shadow: 2px 5px 10px -5px #B7B5B5;
$btn-secondary-background-color: #CCCBC6;
$btn-secondary-text-color: $text-color;
+$btn-disabled-background-color: #ddd;
+$btn-disabled-text-color: #999;
$block-border-radius: 15px;
$block-background-color: #fff;