title: How to add spinner in react js using typescript
body: <p>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?</p>
  
  <p>Here the code below</p>
  
  <pre><code>import React, { useState } from "react";
  import Form from "../components/form";
  import Movie from "../components/movie";
  import Loader from "../components/loader";
  
  const MoviePage: React.FC = () =&gt; {
    const APP_ID = "***************";
    const [query, setQuery] = useState([]);
    let load: boolean = true;
  
    const addQuery = (query: any) =&gt; {
      const newQuery: any = query;
      setQuery(newQuery);
      console.log(newQuery);
    };
  
    const searchQuery = async (querys: string) =&gt; {
      const response = await fetch(
        `https://api.themoviedb.org/3/search/movie?api_key=${APP_ID}&amp;query=${querys}`
      );
      const data = await response.json();
      if (data) {
        load = false;
      }
      addQuery(data.results);
      //console.log(query);
    };
  
    return (
      &lt;React.Fragment&gt;
        &lt;Form onSearch={searchQuery} /&gt;
        {load ? &lt;Loader /&gt; : &lt;Movie query={query} /&gt;}
      &lt;/React.Fragment&gt;
    );
  };
  
  export default MoviePage;
  
  </code></pre>
  
  <p>Loader component</p>
  
  <pre><code>import React from "react";
  
  const Loader = () =&gt; {
    return (
      &lt;div className="preloader-wrapper big active loader"&gt;
        &lt;div className="spinner-layer spinner-blue-only"&gt;
          &lt;div className="circle-clipper left"&gt;
            &lt;div className="circle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="gap-patch"&gt;
            &lt;div className="circle"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="circle-clipper right"&gt;
            &lt;div className="circle"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Loader;
  </code></pre>