Breaking News: Grepper is joining You.com. Read the official announcement!

Show loading animation during API call

codrzch answered on July 30, 2022 Popularity 3/10 Helpfulness 1/10

answer Show loading animation during API call

Show loading animation during API call

Comment

import "./styles.css";
import React, { useState, useEffect } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      let result;
      setIsLoading(true);
      result = await api.get(URL); // this takes 2000ms!
      //setData(result.data);
      setIsLoading(false);
    };

    fetchData();
  }, []);
  return (
    <div className="App">
      {isLoading ? <p>currently loading</p> : null}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const api = {
  get: async function () {
    await new Promise((r, e) => setTimeout(r, 2000));
  }
};

Popularity 3/10 Helpfulness 1/10 Language css

Source: stackoverflow.com

Tags: api call css loading-animation show

Link to this answer
Share Copy Link