[ChatQnA] Show spinner after query to improve user experience (#1003) (#1628)

Signed-off-by: Wang,Le3 <le3.wang@intel.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: wangleflex

ChatQnA/ui/svelte/src/lib/shared/components/loading/Spinner.svelte

@@ -0,0 +1,68 @@
+<!--
+  Copyright (c) 2024 Intel Corporation
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<script lang="ts">
+  export let color = '#3498db';
+</script>
+
+<div class="spinner" style="width: 28px; height: 28px;">
+  <svg viewBox="0 0 50 50">
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke={color}
+      stroke-width="6"
+    />
+  </svg>
+</div>
+
+<style>
+  .spinner {
+    display: inline-block;
+    animation: rotate 1.4s linear infinite;
+  }
+
+  .path {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite;
+    stroke-linecap: round;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+</style>

ChatQnA/ui/svelte/src/routes/+page.svelte

@@ -39,6 +39,8 @@
 	import ChatMessage from "$lib/modules/chat/ChatMessage.svelte";
 	import { fetchAllFile } from "$lib/network/upload/Network.js";
 	import { getNotificationsContext } from "svelte-notifications";
+	import Spinner from "$lib/shared/components/loading/Spinner.svelte";
+
 
 	let query: string = "";
 	let loading: boolean = false;
@@ -241,8 +243,13 @@
 						type="submit"
 						id="send"
 						class="absolute bottom-2.5 end-2.5 px-4 py-2 text-sm font-medium text-white dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-						><PaperAirplane /></button
-					>
+						>
+						{#if loading}
+							<Spinner />
+						{:else}
+							<PaperAirplane />
+						{/if}
+					</button>
 				</div>
 			</div>
 		</div>