feat(chat): suspend controller when sending

lemredd · Nov 25, 2022 · 97b46e2 · 97b46e2
1 parent 4da79ab
commit 97b46e2
Showing 1 changed file with 47 additions and 30 deletions.
diff --git a/components/consultation/chat_window/user_controller.vue b/components/consultation/chat_window/user_controller.vue
@@ -34,44 +34,56 @@
 				class="image-upload"
 				@close="hideImageUpload"/>
 		</div>
-		<div v-if="isOngoing" class="message-box">
-			<input
-				v-model="textInput"
-				type="text"
-				placeholder="Enter your message here..."
-				@keyup.enter.exact="send"/>
-		</div>
-		<div v-if="isOngoing" class="right-controls">
-			<button class="send-btn material-icons" @click="send">
-				send
-			</button>
-		</div>
+		<Suspensible :is-loaded="hasSubmittedMessage" class="suspense-container">
+			<div class="loaded-container">
+				<div v-if="isOngoing" class="message-box">
+					<input
+						v-model="textInput"
+						type="text"
+						placeholder="Enter your message here..."
+						@keyup.enter.exact="send"/>
+				</div>
+				<div v-if="isOngoing" class="right-controls">
+					<button class="send-btn material-icons" @click="send">
+						send
+					</button>
+				</div>
+			</div>
+		</suspensible>
 	</div>
 </template>
 
 <style scoped lang="scss">
-@import "@styles/btn.scss";
-.user-controls {
-	@apply border-t p-3 flex;
-}
+	@import "@styles/btn.scss";
+	.user-controls {
+		@apply border-t p-3 flex;
+
+		.suspense-container {
+			width: 100%;
+
+			.loaded-container {
+				@apply flex;
+			}
+		}
+	}
 
-.will-not-start{
+	.will-not-start{
 		@apply text-sm opacity-50;
-}
+	}
 
-.message-box {
-	@apply flex-1 mx-2 border-0;
-	height: max-content;
-	input {
-		@apply bg-transparent border-b px-2;
-		width: 100%;
+	.message-box {
+		@apply flex-1 mx-2 border-0;
+		height: max-content;
+		input {
+			@apply bg-transparent border-b px-2;
+			width: 100%;
 
-		&:focus {
-			@apply border-b-gray-500;
-			outline: none;
+			&:focus {
+				@apply border-b-gray-500;
+				outline: none;
+			}
 		}
 	}
-}
 </style>
 
 <script setup lang="ts">
@@ -89,6 +101,7 @@ import { CHAT_MESSAGE_ACTIVITY } from "$@/constants/provided_keys"
 
 import Fetcher from "$@/fetchers/chat_message"
 import makeSwitch from "$@/helpers/make_switch"
+import Suspensible from "@/helpers/suspensible.vue"
 import ChatMessageActivityFetcher from "$@/fetchers/chat_message_activity"
 import ConsultationTimerManager from "$@/helpers/consultation_timer_manager"
 import makeConsultationStates from "@/consultation/helpers/make_consultation_states"
@@ -145,10 +158,12 @@ const mayStartConsultation = computed<boolean>(() => {
 const fetcher: Fetcher = new Fetcher()
 const chatMessageActivityFetcher = new ChatMessageActivityFetcher()
 
-function send(): void {
+const hasSubmittedMessage = ref(true)
+async function send() {
+	hasSubmittedMessage.value = false
 	if (textInput.value === "") return
 
-	fetcher.create({
+	await fetcher.create({
 		"data": {
 			"value": textInput.value
 		},
@@ -173,5 +188,7 @@ function send(): void {
 			seenMessageAt
 		})
 	})
+
+	hasSubmittedMessage.value = true
 }
 </script>