fix: resolve hydration issue

- Fixed hydration mismatch by aligning server-side and client-side rendering.
- Adjusted component imports and rendering logic to ensure consistent output between server and client.

Co-Authored-By: Jagad Brahma Wiraatmaja <officialelsa21@gmail.com>

Author: sayaptawon

src/components/BubbleMessage.js

@@ -7,17 +7,22 @@ import { faWhatsapp } from '@fortawesome/free-brands-svg-icons';
 
 export default function BubbleMessage () {
   const [isFormVisible, setIsFormVisible] = useState(false);
+  const [isSent, setIsSent] = useState(false);
+  const [isPageLoaded, setIsPageLoaded] = useState(false);
   const [formData, setFormData] = useState({
     name: '',
     email: '',
     message: '',
   });
-  const [isSent, setIsSent] = useState(false);
 
   useEffect(() => {
     setIsSent(false);
   }, []);
 
+  useEffect(() => {
+    setIsPageLoaded(true);
+  }, []);
+
   const handleChange = useCallback((event) => {
     const { name, value } = event.target;
     setFormData((prev) => ({ ...prev, [name]: value }));
@@ -51,6 +56,10 @@ export default function BubbleMessage () {
     }
   }, [isSent]);
 
+  if (!isPageLoaded) {
+    return null;
+  }
+
   return (
     <section data-theme='light'>
       <button

src/components/Navbar.js

@@ -29,6 +29,7 @@ const Navbar = ({ isOpen, setIsOpen }) => {
   const menuRef = useRef(null);
   const pathname = usePathname();
   const [isDesktop, setIsDesktop] = useState(false);
+  const [iconsLoaded, setIconsLoaded] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -62,6 +63,10 @@ const Navbar = ({ isOpen, setIsOpen }) => {
     };
   }, [setIsOpen, pathname]);
 
+  useEffect(() => {
+    setIconsLoaded(true);
+  }, []);
+
   const activeLink = (href) =>
     pathname === href ? 'bg-primary text-neutral' : '';
 
@@ -73,24 +78,28 @@ const Navbar = ({ isOpen, setIsOpen }) => {
       <div className='container mx-auto flex items-center justify-between px-4 py-3'>
         <Link href='/'>
           <div className='flex items-center text-xl font-bold btn btn-neutral'>
-            <FontAwesomeIcon
-              icon={faReact}
-              size='lg'
-              className='text-primary'
-            />
+            {iconsLoaded && (
+              <FontAwesomeIcon
+                icon={faReact}
+                size='lg'
+                className='text-primary'
+              />
+            )}
             <span className='hidden md:inline lg:inline'>
               {navbarData.brand}
             </span>
           </div>
         </Link>
         {/* Mobile Navbar */}
         <div className='lg:hidden relative'>
-          <button
-            className='btn btn-square btn-neutral'
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <FontAwesomeIcon icon={faBars} size='lg' />
-          </button>
+          {iconsLoaded && (
+            <button
+              className='btn btn-square btn-neutral'
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              <FontAwesomeIcon icon={faBars} size='lg' />
+            </button>
+          )}
           <div
             ref={menuRef}
             className={`fixed top-0 left-0 w-full h-screen bg-base-300 bg-opacity-100 transform ${
@@ -100,12 +109,14 @@ const Navbar = ({ isOpen, setIsOpen }) => {
             <div className='bg-base-100 p-4'>
               <div className='flex justify-between items-center'>
                 <h2 className='text-2xl font-bold text-white'>Menu</h2>
-                <button
-                  className='btn btn-circle btn-neutral'
-                  onClick={() => setIsOpen(false)}
-                >
-                  <FontAwesomeIcon icon={faTimes} size='lg' />
-                </button>
+                {iconsLoaded && (
+                  <button
+                    className='btn btn-circle btn-neutral'
+                    onClick={() => setIsOpen(false)}
+                  >
+                    <FontAwesomeIcon icon={faTimes} size='lg' />
+                  </button>
+                )}
               </div>
             </div>
             <div className='flex flex-col items-center pt-6'>

src/components/Testimonial.js

@@ -59,7 +59,12 @@ const Testimonial = () => {
     };
   }, [resetInterval]);
 
-  const { name, photo, testimonial, rating } = testimonials[currentIndex] || {};
+  const {
+    name = '',
+    photo = '',
+    testimonial = '',
+    rating = 0,
+  } = testimonials[currentIndex] || {};
 
   if (!testimonials.length) return null;
 

src/components/VisitorStatistics.js

@@ -65,7 +65,11 @@ const VisitorStatistics = () => {
       processVisitorData(data);
     };
 
-    onValue(visitorsRef, handleValueChange);
+    try {
+      onValue(visitorsRef, handleValueChange);
+    } catch (error) {
+      console.error('Error subscribing to Firebase data:', error);
+    }
 
     return () => {
       off(visitorsRef, 'value', handleValueChange);

src/pages/about/index.js

@@ -145,6 +145,7 @@ const About = () => {
             width={1200}
             height={600}
             className='w-full h-auto rounded-lg shadow-lg'
+            priority
           />
         </div>
 

src/pages/layanan/kesehatan/index.js

@@ -69,6 +69,7 @@ const Kesehatan = () => {
             width={1200}
             height={600}
             className='w-full rounded-lg shadow'
+            priority
           />
         </div>
 

src/pages/layanan/kunjungan-penitipan-barang/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState } from 'react';
 import Layout from '@/pages/layout';
 import Link from 'next/link';
@@ -103,6 +105,7 @@ const KunjunganPenitipanBarang = () => {
                 height={600}
                 className='w-full h-auto object-cover rounded-lg shadow-lg'
                 unoptimized
+                priority
               />
               {/* Badge */}
               <div className='absolute top-2 right-2 px-2 py-1 badge-primary text-primary-content rounded-badge text-sm font-bold'>