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