replace the "Loading..." text with an animated spinner:

import React, { useState, useEffect } from 'react';
import { PhoneIcon, MailIcon, LocationMarkerIcon } from '@heroicons/react/outline'; // Import Heroicons
import profilePicture from '../assets/profile-picture.png';
import { fetchAcfData } from '../utils/api';

const Home = () => {
  const [acfData, setAcfData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchAcfData('home')
      .then((data) => {
        setAcfData(data);
      })
      .catch((err) => {
        setError(err.message);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        Loading...
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center min-h-screen text-red-500">
        {error}
      </div>
    );
  }

  if (!acfData) {
    return <div>No data found for this page.</div>;
  }

  const { first_name, last_name, role, description, contact } = acfData;

  return (
    <div className="container mx-auto my-8 pt-6 px-6 pb-6 lg:pb-0">
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
        <div className="order-2 lg:order-1 lg:col-span-4 flex justify-center hidden lg:block">
          <div className="fg-border-primary rounded-full">
            <img className="rounded-full" src={profilePicture} alt="Profile" />
          </div>
        </div>
        <div className="order-1 lg:order-2 lg:col-span-8">
          <h1 className="fg-text-primary text-6xl mb-2">
            <span className="font-bold">{first_name}</span> {last_name}
          </h1>
          <h3 className="fg-text-primary text-2xl tracking-widest mb-8">{role}</h3>
          <p className="fg-text-light text-lg leading-relaxed mb-6">{description}</p>
          {contact && (
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 text-lg">
              {/* Phone */}
              <div className="flex items-center space-x-2">
                <PhoneIcon className="h-6 w-6 fg-text-primary" />
                <a
                  href={contact['phone_link']}
                  className="fg-text-primary text-md"
                >
                  {contact['phone_text']}
                </a>
              </div>
              {/* Email */}
              <div className="flex items-center space-x-2">
                <MailIcon className="h-6 w-6 fg-text-primary" />
                <a
                  href={`mailto:${contact['email_link']}`}
                  className="fg-text-primary text-md"
                >
                  {contact['email_text']}
                </a>
              </div>
              {/* Address */}
              <div className="flex items-center space-x-2">
                <LocationMarkerIcon className="h-6 w-6 fg-text-primary" />
                <a
                  href={contact['address_link']}
                  className="fg-text-primary text-md"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {contact['address_text']}
                </a>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Home;