React- Hooks- Gloabal spinner for react applicaiton

 React- Hooks- Gloabal spinner for react application

======================================

src/hooks/useFullPageSpinner.js

-------------------------------

import React, { useState } from 'react';

import { Spinner } from '@mat-ui/spinner';

import { AriaAnnouncerProvider } from '@mat-ui/aria-announcer';

const useFullPageSpinner = () => {

  const [loading, setLoading] = useState(false);

  return [

    loading ?     <>  <AriaAnnouncerProvider>

                          <Spinner style={{ position: "absolute", top: "50%", left: "50%" , zIndex:1000}} className="circular-spinner large" />

                      </AriaAnnouncerProvider>

                  </>: null,

    () => setLoading(true),   // show the spinner

    () => setLoading(false)  // hide the spinner

   ]

}

export default useFullPageSpinner;

src/App/componets.js

--------------------

import React from 'react';

import useFullPageSpinner from "../hooks/useFullPageSpinner";

App () {

  const [loader, showLoader, hideLoader] = useFullPageSpinner();

  const [ userData, setUserData] = useState([]);

   useEffect( () =>{

    loadUserData();

  },[]);

  function loadUserData(){

    showLoader();

    api.get('/api/endpoint').then( res =>{

      hideLoader();

      if(res.status){

        console.log(res);

        setUserData(res.data);

      }

      else{

        setUserData([]);

      }

    });

  }

  return (

    <loader>

     { userData.map( item=> <div >{ itemv} </div>) }

   

    </>

  )

}