feat: add loading fade effect to ContactDetailView and adjust FormItem width in ContactForm

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 */

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>

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