How to add loading effect in reactjs?

Question

I'm creating a website using mern stack. In react files, I'm using many hooks, in useState hook, it takes some time to change and set new state. So, for that time it's showing data before changed state. I want to give some loading effect for the time till useState change the state and show data. What is the short and simple way to create that effect?

Answer 1

You can use something like this

import React, { useEffect } from "react";

import { getDatas } from "./getDatas";
import Datas from "../components/Datas";
import Loading from "../components/Loading";

export default function Component() {
  const [datas, setDatas] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getDatas().then((res) => {
     setDatas(res.datas);
     setLoading(false);
    });
  }, []);

  return (
    <div>
      {loading ? <Loading /> : <Datas />
    </div>
  );
}