Add loading skeleton for contact edit and template pages

Author: kris6673

src/pages/email/administration/contacts-template/edit.jsx

@@ -2,43 +2,45 @@ import { useEffect, useMemo, useCallback } from "react";
 import { useForm } from "react-hook-form";
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import CippFormPage from "/src/components/CippFormPages/CippFormPage";
+import CippFormSkeleton from "/src/components/CippFormPages/CippFormSkeleton";
 import ContactFormLayout from "/src/components/CippFormPages/CippAddEditContact";
 import { ApiGetCall } from "../../../../api/ApiCall";
 import countryList from "/src/data/countryList.json";
 import { useRouter } from "next/router";
 
-const countryLookup = new Map(
-  countryList.map(country => [country.Name, country.Code])
-);
+const countryLookup = new Map(countryList.map((country) => [country.Name, country.Code]));
 
 const EditContactTemplate = () => {
   const router = useRouter();
   const { id } = router.query;
-  
+
   const contactTemplateInfo = ApiGetCall({
     url: `/api/ListContactTemplates?id=${id}`,
     queryKey: `ListContactTemplates-${id}`,
     waiting: !!id,
   });
 
-  const defaultFormValues = useMemo(() => ({
-    displayName: "",
-    firstName: "",
-    lastName: "",
-    email: "",
-    hidefromGAL: false,
-    streetAddress: "",
-    postalCode: "",
-    city: "",
-    state: "",
-    country: "",
-    companyName: "",
-    mobilePhone: "",
-    businessPhone: "",
-    jobTitle: "",
-    website: "",
-    mailTip: "",
-  }), []);
+  const defaultFormValues = useMemo(
+    () => ({
+      displayName: "",
+      firstName: "",
+      lastName: "",
+      email: "",
+      hidefromGAL: false,
+      streetAddress: "",
+      postalCode: "",
+      city: "",
+      state: "",
+      country: "",
+      companyName: "",
+      mobilePhone: "",
+      businessPhone: "",
+      jobTitle: "",
+      website: "",
+      mailTip: "",
+    }),
+    []
+  );
 
   const formControl = useForm({
     mode: "onChange",
@@ -52,12 +54,14 @@ const EditContactTemplate = () => {
     }
 
     // Handle both single object (when fetching by ID) and array responses
-    const contact = Array.isArray(contactTemplateInfo.data) ? contactTemplateInfo.data[0] : contactTemplateInfo.data;
+    const contact = Array.isArray(contactTemplateInfo.data)
+      ? contactTemplateInfo.data[0]
+      : contactTemplateInfo.data;
     const address = contact.addresses?.[0] || {};
     const phones = contact.phones || [];
-    
+
     // Use Map for O(1) phone lookup
-    const phoneMap = new Map(phones.map(p => [p.type, p.number]));
+    const phoneMap = new Map(phones.map((p) => [p.type, p.number]));
 
     return {
       ContactTemplateID: id || "",
@@ -70,9 +74,7 @@ const EditContactTemplate = () => {
       postalCode: address.postalCode || "",
       city: address.city || "",
       state: address.state || "",
-      country: address.countryOrRegion 
-        ? countryLookup.get(address.countryOrRegion) || ""
-        : "",
+      country: address.countryOrRegion ? countryLookup.get(address.countryOrRegion) || "" : "",
       companyName: contact.companyName || "",
       mobilePhone: phoneMap.get("mobile") || "",
       businessPhone: phoneMap.get("business") || "",
@@ -114,9 +116,11 @@ const EditContactTemplate = () => {
       website: values.website,
       mailTip: values.mailTip,
     };
-  },);
-  
-  const contactTemplate = Array.isArray(contactTemplateInfo.data) ? contactTemplateInfo.data[0] : contactTemplateInfo.data;
+  });
+
+  const contactTemplate = Array.isArray(contactTemplateInfo.data)
+    ? contactTemplateInfo.data[0]
+    : contactTemplateInfo.data;
 
   return (
     <CippFormPage
@@ -129,10 +133,10 @@ const EditContactTemplate = () => {
       data={contactTemplate}
       customDataformatter={customDataFormatter}
     >
-      <ContactFormLayout
-        formControl={formControl}
-        formType="edit"
-      />
+      {contactTemplateInfo.isLoading && <CippFormSkeleton layout={[2, 2, 1, 2, 1, 2, 2, 2, 4]} />}
+      {!contactTemplateInfo.isLoading && (
+        <ContactFormLayout formControl={formControl} formType="edit" />
+      )}
     </CippFormPage>
   );
 };