hydration error fixed

app/privacy-policy/page.js

@@ -211,7 +211,7 @@ export default function PrivacyPolicyPage() {
   return (
     <Layout
       headerStyle={1}
-      footerStyle={1}
+      footerStyle={2}
       breadcrumbTitle="Privacy Policy"
       bannerImage="/assets/images/privacy-policy/privacy-policy-banner.png"
     >

components/layout/footer/Footer1.js

@@ -8,11 +8,13 @@ import { servicesList } from "@/utils/Services.utils"
 
 export default function Footer2() {
     const [email, setEmail] = useState("");
+    const [isHydrated, setIsHydrated] = useState(false);
 
     useEffect(() => {
         const user = "bloor";
         const domain = "rapharehab.ca";
         setEmail(`${user}@${domain}`);
+        setIsHydrated(true);
     }, []);
 
     const servicesCols = [
@@ -172,11 +174,11 @@ export default function Footer2() {
                                             </li>
                                             <li>
                                                 <i className="icon-26"></i>
-                                                {email ? (
+                                                {isHydrated && email ? (
                                                     <Link href={`mailto:${email}`} aria-label={email}>
                                                         {email}
                                                     </Link>
-                                                ) : (
+                                                ) : isHydrated ? null : (
                                                     <span>Loading...</span>
                                                 )}
                                             </li>

components/layout/footer/Footer2.js

@@ -8,11 +8,13 @@ import { servicesList } from "@/utils/Services.utils"
 
 export default function Footer2() {
     const [email, setEmail] = useState("");
+    const [isHydrated, setIsHydrated] = useState(false);
 
     useEffect(() => {
         const user = "bloor";
         const domain = "rapharehab.ca";
         setEmail(`${user}@${domain}`);
+        setIsHydrated(true);
     }, []);
 
     const servicesCols = [
@@ -172,11 +174,11 @@ export default function Footer2() {
                                             </li>
                                             <li>
                                                 <i className="icon-26"></i>
-                                                {email ? (
+                                                {isHydrated && email ? (
                                                     <Link href={`mailto:${email}`} aria-label={email}>
                                                         {email}
                                                     </Link>
-                                                ) : (
+                                                ) : isHydrated ? null : (
                                                     <span>Loading...</span>
                                                 )}
                                             </li>