Monday, 28 December 2020

Disabling the preloader after the data appears on the website

How can I set the preloader in axios.interceptor to turn off how will the data be displayed on the page? At this point, I can see the data is downloaded, the preloader turn off and I can see the jump as the data appears on the page. Intended effect: disabling the preloader when data appears on the website.

Example: https://stackblitz.com/edit/react-ca6osn?file=src%2FApp.js

Axios.interceptors.request.use(function (config) {

  // spinning start to show
  // UPDATE: Add this code to show global loading indicator
  document.body.classList.add('loading-indicator');

  return config
}, function (error) {
  return Promise.reject(error);
});

Axios.interceptors.response.use(function (response) {

  // spinning hide
  // UPDATE: Add this code to hide global loading indicator
  document.body.classList.remove('loading-indicator');

  return response;
}, function (error) {
  return Promise.reject(error);
});

export default function App() {
  const [values, setValues] = useState({
        title: []
    });

  useEffect(() => {
    loadProfile();
    }, []);


    const loadProfile = () => { 

        axios({
            method: 'GET',
            url: `https://jsonplaceholder.typicode.com/todos`,
          })
          .then(res => {

        setValues({...values, title: res.data});
          })
          .catch(err => {
        console.log('error', err.response.data);
      
          })
  }

  return (
    
    <div>
       {values.title.map(data => (
          <div style=>
            <p>{data.title}</p>
          </div>
      ))}
    </div>
  );
}

CSS

.loading-indicator:before {
    content: '';
    background: black;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.loading-indicator:after {
    content: 'Loading';
    position: fixed;
    width: 100%;
    top: 50%;
    left: 0;
    z-index: 1001;
    color:white;
    text-align:center;
    font-weight:bold;
    font-size:1.5rem;        
}


from Disabling the preloader after the data appears on the website

No comments:

Post a Comment