From b7092744fdf691e467cb6ad8bd9404dff4ebb30a Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sun, 14 Sep 2025 21:43:40 +0530
Subject: [PATCH] feat: add loading fade effect to ContactDetailView and adjust
 FormItem width in ContactForm

---
 frontend/src/assets/styles/main.scss             | 4 ++++
 frontend/src/features/contact/ContactForm.vue    | 2 +-
 frontend/src/views/contact/ContactDetailView.vue | 6 +++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss
index 2324c734..8220a84d 100644
--- a/frontend/src/assets/styles/main.scss
+++ b/frontend/src/assets/styles/main.scss
@@ -184,6 +184,10 @@
   @apply border shadow rounded;
 }
 
+.loading-fade {
+  @apply opacity-50 transition-opacity duration-300
+}
+
 // Scrollbar start
 ::-webkit-scrollbar {
   width: 8px; /* Adjust width */
diff --git a/frontend/src/features/contact/ContactForm.vue b/frontend/src/features/contact/ContactForm.vue
index 201f5052..0a336746 100644
--- a/frontend/src/features/contact/ContactForm.vue
+++ b/frontend/src/features/contact/ContactForm.vue
@@ -42,7 +42,7 @@
       <div class="flex flex-col flex-1">
         <div class="flex items-end">
           <FormField v-slot="{ componentField }" name="phone_number_country_code">
-            <FormItem class="w-max-content">
+            <FormItem class="w-max">
               <FormLabel class="flex items-center whitespace-nowrap">
                 {{ t('globals.terms.phoneNumber') }}
               </FormLabel>
diff --git a/frontend/src/views/contact/ContactDetailView.vue b/frontend/src/views/contact/ContactDetailView.vue
index 3bc3ff24..7747b3da 100644
--- a/frontend/src/views/contact/ContactDetailView.vue
+++ b/frontend/src/views/contact/ContactDetailView.vue
@@ -5,7 +5,11 @@
         <CustomBreadcrumb :links="breadcrumbLinks" />
       </div>
 
-      <div v-if="contact" class="flex justify-center space-y-4 w-full">
+      <div
+        v-if="contact"
+        class="flex justify-center space-y-4 w-full"
+        :class="{ 'loading-fade': formLoading }"
+      >
         <div class="flex flex-col w-full mt-12">
           <div class="flex flex-col space-y-2">
             <AvatarUpload