Site renders just for a few seconds after adding useEffect Hook and fetching data from sanity.

[nan0hard]

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

import { urlFor, client } from "../../client";

import "./About.scss";

const About = () => {
    const [abouts, setAbouts] = useState([]);

    useEffect(() => {
        const query = '*[_type == "abouts"]';
        client.fetch(query).then((data) => {
            setAbouts(data);
        });
    }, []);

    return (
        <>
            <h2 className="head-text">
                I Know That <span>Good Devlopment</span>
                <br /> Means <span>Good Business</span>
            </h2>

            <div className="app__profiles">
                {abouts.map((about, index) => (
                    <motion.div
                        whileInView={{ opacity: 1 }}
                        whileHover={{ scale: 1.1 }}
                        transition={{ duration: 0.5, type: "tween" }}
                        className="app__profile-item"
                        key={about.title + index}
                    >
                        <img src={urlFor(about.imgUrl)} alt="about.title" />
                        <h2 className="bold-text" style={{ marginTop: 20 }}>
                            {about.title}
                        </h2>
                        <p className="p-text" style={{ marginTop: 10 }}>
                            {about.description}
                        </p>
                    </motion.div>
                ))}
            </div>
        </>
    );
};

export default About;

I think the problem occurred when I added about in About Schema.

[nan0hard]

Okay, I noticed something whenever I add more than one about the page starts acting weird i.e it shows the entire content for a few milliseconds, and after I remove them and keep just one about an item then the content on the page displays as usual. I think it has to do something with the useEffect Hook.

[YasirBajwa]

Hi @nan0hard I did not completely understand what I understand is you are seeing some delay in cards while fetching from sanity it's a normal case in my point of view. You can remove the animation to test it because you have also added a 0.5-sec delay in framer motion div.