From 77c32cde5cfb878af9b7142cbec7fa49371814e8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 12 Mar 2024 10:41:08 +0530
Subject: [PATCH] fix: added loading indicator in Tabs content

---
 frontend/src/components/Activities.vue        | 23 +++++++++++++++----
 .../src/components/Icons/LoadingIndicator.vue | 22 ++++++++++++++++++
 2 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/Icons/LoadingIndicator.vue

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 54c67451..f270d98b 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -77,7 +77,14 @@
       </template>
     </Dropdown>
   </div>
-  <div v-if="activities?.length" class="activities flex-1 overflow-y-auto">
+  <div
+    v-if="all_activities?.loading"
+    class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
+  >
+    <LoadingIndicator class="w-6 h-6" />
+    <span>Loading...</span>
+  </div>
+  <div v-else-if="activities?.length" class="activities flex-1 overflow-y-auto">
     <div
       v-if="title == 'Notes'"
       class="activity grid grid-cols-3 gap-4 px-10 pb-5"
@@ -735,10 +742,12 @@
 </template>
 <script setup>
 import UserAvatar from '@/components/UserAvatar.vue'
+import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import TaskIcon from '@/components/Icons/TaskIcon.vue'
+import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
 import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
@@ -920,8 +929,10 @@ function update_activities_details(activity) {
 }
 
 const emptyText = computed(() => {
-  let text = 'No Email Communications'
-  if (props.title == 'Calls') {
+  let text = 'No Activities'
+  if (props.title == 'Emails') {
+    text = 'No Email Communications'
+  } else if (props.title == 'Calls') {
     text = 'No Call Logs'
   } else if (props.title == 'Notes') {
     text = 'No Notes'
@@ -932,8 +943,10 @@ const emptyText = computed(() => {
 })
 
 const emptyTextIcon = computed(() => {
-  let icon = EmailIcon
-  if (props.title == 'Calls') {
+  let icon = ActivityIcon
+  if (props.title == 'Emails') {
+    icon = EmailIcon
+  } else if (props.title == 'Calls') {
     icon = PhoneIcon
   } else if (props.title == 'Notes') {
     icon = NoteIcon
diff --git a/frontend/src/components/Icons/LoadingIndicator.vue b/frontend/src/components/Icons/LoadingIndicator.vue
new file mode 100644
index 00000000..7ad0e1c0
--- /dev/null
+++ b/frontend/src/components/Icons/LoadingIndicator.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    class="max-w-xs animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>