feat(communication): improve messages loading state accessibility (#10613)

Signed-off-by: SaiVaraprasad Medapati <varaprasadreddy9676@gmail.com>

plugins/communication-resources/src/components/message/MessagesLoading.svelte

@@ -13,12 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Label } from '@hcengineering/ui'
+  import { Label, Loading } from '@hcengineering/ui'
 
   import communication from '../../plugin'
 </script>
 
-<div class="loader">
+<div class="loader" role="status" aria-live="polite" aria-busy="true">
+  <Loading size="small" />
   <Label label={communication.string.Loading} />
 </div>
 
@@ -28,6 +29,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 0.5rem;
     color: var(--global-secondary-TextColor);
     font-weight: 500;
     height: 5rem;