How to add spinner in react js using typescript

Question

I am trying to add spinner in react component. But it does not remove spinner after retrieving data from api. What am I doing wrong?

Here the code below

import React, { useState } from "react";
import Form from "../components/form";
import Movie from "../components/movie";
import Loader from "../components/loader";

const MoviePage: React.FC = () => {
  const APP_ID = "***************";
  const [query, setQuery] = useState([]);
  let load: boolean = true;

  const addQuery = (query: any) => {
    const newQuery: any = query;
    setQuery(newQuery);
    console.log(newQuery);
  };

  const searchQuery = async (querys: string) => {
    const response = await fetch(
      `https://api.themoviedb.org/3/search/movie?api_key=${APP_ID}&query=${querys}`
    );
    const data = await response.json();
    if (data) {
      load = false;
    }
    addQuery(data.results);
    //console.log(query);
  };

  return (
    <React.Fragment>
      <Form onSearch={searchQuery} />
      {load ? <Loader /> : <Movie query={query} />}
    </React.Fragment>
  );
};

export default MoviePage;

Loader component

import React from "react";

const Loader = () => {
  return (
    <div className="preloader-wrapper big active loader">
      <div className="spinner-layer spinner-blue-only">
        <div className="circle-clipper left">
          <div className="circle"></div>
        </div>
        <div className="gap-patch">
          <div className="circle"></div>
        </div>
        <div className="circle-clipper right">
          <div className="circle"></div>
        </div>
      </div>
    </div>
  );
};

export default Loader;

HermitCrab · Accepted Answer · 2020-04-08 11:39:51Z

2

You need to put your load variable in the component state, otherwise React will ignore it.

const [load, setLoad] = React.useState(true);

Then call setLoad(false) to hide the spinner

answered Apr 8, 2020 at 11:39

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Khabir · Accepted Answer · 2020-04-08 20:13:16Z

Write a Loader Component as below:

import React from 'react'
import {ClipLoader} from "react-spinners";

const Loader = ({ loading, message, css, size }) => {

    if (size === undefined)
        size = 40;

    return loading ? (
        <div className='overlay-content'>
            <div className='wrapper'>
                <ClipLoader
                        css={css}
                        size={size}
                        color={"#123abc"}
                        loading={loading}
                    />
                <span className='message'>
                    {message}
                </span>
            </div>
        </div>
    ) : null
};

export default Loader;

Write PostPage Component as below:

import React, {useEffect, useState} from "react";
import Loader from "./Loader";
import axios from 'axios';

function PostPage() {
    const [posts, setPost] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        setIsLoading(true);
        let isSubscribed = true;
        axios.get(`https://jsonplaceholder.typicode.com/posts`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
                setIsLoading(false);

            }).catch(err => {
            setIsLoading(false);
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    return (
        <React.Fragment>
            <ul>
                {
                    isLoading ?
                        <Loader css='margin-left: 48%; margin-top: 10%' loading={isLoading}/> :
                        posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}

export default PostPage;

Then use this component in App.js as below:

import React from "react";
import ReactDOM from 'react-dom';
import PostPage from "./PostPage";

class App extends React.Component {
  render() {
    return (
        <PostPage/>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

export default App;

Collectives™ on Stack Overflow

How to add spinner in react js using typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related