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.