I start learning react about 2 month ago. Right now I am trying to build my portfolio with some interactive design using spline 3d. The problem is the loading time is too long and I want to make a loading screen that stop loading exact time when my 3d start element render

CodePudding user response：

There are multiple ways to create it by your self. you can you use the library react-loader-spinner on the console type npm install react-loader-spinner --save

import React from 'react';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
import '../style.css';
const LoaderComponent = () => {
    return (
        <div className="loader">
            <Loader
                type="Circles"
                color="#dc1c2c"
                height={50}
                width={100}
                //timeout={1000} //3 secs
            />
        </div>
    );
};

export default LoaderComponent;

To display the component there are multiple ways, here is a way for GraphQL fetching data from the DB

const [results] = useQuery({ query: PRODUCT_QUERY });
  const { data, fetching, error } = results;

  //Check or the data coming in
  if (fetching) return <p>Loading...</p>;

  if (error) return <p>Oh no... {error.message}</p>;

Here is a way from fetching data with HTTP Request:

const UserList = () => {
  const auth = useContext(AuthContext);
  const { isLoading, error, sendRequest, clearError } = useHttpClient();
  const [loadedUsers, setLoadedUsers] = useState();

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        //with fetch, the default request type is GET request
        const responseData = await sendRequest(
          process.env.REACT_APP_BACKEND_URL   "/users"
        );
        setLoadedUsers(responseData.users); //users propeties is the given value from the backend (user-controllers.js on getUsers())
      } catch (err) {}
    };
    fetchUsers();
  }, [sendRequest]);

  

  return (
    <React.Fragment>
      <ErrorModal error={error} onClear={clearError} />
      {isLoading && <LoadingSpinner asOverlay />}
      {/* we need to render loadedUsers only if not empty*/}
      {!isLoading && loadedUsers && (
        <div className="userList">
          <span className="Title">Display Here the data</span>
        </div>
      )}
    </React.Fragment>
  );
};

CodePudding user response：

  

// this logic is simple 
// first, you have created one boolean usestate(false) and then load your screen that time usestate are true and process is complete after usesate are false
//  I will show you the following example. I hope that helps you.

export default function Gradients(props) {
   const [isLoading, setIsLoading] = useState(false);

   const getAllGradient = () => {
    setIsLoading(true);
    axios
      .get("https://localhost:5000")
      .then((res) => {
        const gradientColors = res.data;
        // process complete after isLoading are false
        // your process (this only example)
         setIsLoading(false);
       })
    
  }
  return(
    <div>
           {
    isLoading ? <Loader> : <YourComponent />
     }
     </div>
    
    )
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>