score:0
Accepted answer
make state isloading : false, then in componentwiilmount() / didmount() set isloading state true. after on fetch sucess reset isloading to false;
componenetwillmount/didmount(){
this.setstate({
isloading: true
})
fetchdata().then(res => this.setstate(isloading: false))
.catch(err => this.setstate({isloading: false}));
render(){
return(
{this.state.isloading ? <loader /> : <component view /> }
)
}
score:0
you also could use react-router-loading to fetch data before switching the page.
you only need to mark routes with the loading
prop and tell the router when to switch the pages using the context in components:
import { routes, route } from "react-router-loading";
<routes> // or <switch> for react router 5
<route path="/page1" element={<page1 />} loading />
<route path="/page2" element={<page2 />} loading />
...
</routes>
// page1.jsx
import { useloadingcontext } from "react-router-loading";
const loadingcontext = useloadingcontext();
const loading = async () => {
// loading some data
// call method to indicate that loading is done and we are ready to switch
loadingcontext.done();
};
Source: stackoverflow.com
Related Query
- Fetch data before resolve route
- Resolve data before route change
- React fetch data in server before render
- Reactjs: How to fetch data to loaded before the component is mounted?
- best place to fetch data before rendering in react
- Fetch data on Async ComponentDidMount before rendering
- How to wait for FETCH before rendering DATA in Functional Component?
- Correct way to fetch data when switching route on same level in react-router?
- React, fetch data from database before rendering component
- How do I fetch data from API before render method called? (react, passport, express)
- fetching data before changing route with react-router
- How to fetch data and make a route with the same endpoint React
- How to get the data in a fetch before the component get mount?
- How to fetch data from Nextjs API route when build and deploy?
- Getting back multiple null values before getting back data in fetch request
- React fetch data before render class component
- How can I fetch data in server before render in react isomorphic app?
- Component did mount set state before fetch data
- React fetch new data before render. Problems with componentWillMount
- How to fetch data before render functionnal component in react js
- Fetch data before component render, Reactjs
- How to wait for Fetch to finish grabbing data before continueing
- How to stop React child component from loading before data from fetch call in parent is passed to it
- Need to fetch data into array BEFORE sending it as a prop in React
- ReactJS: Fetch data from a route and pass it to a component via parent component
- How to resolve promise before redirecting to Private Route in React?
- React Redux fetch data before render and do a map function
- Fetch data inside useEffect hook before rendering - React
- How to fetch Data before Render ReactJS
- How to fetch data from database before rendering in a function componment in React?
More Query from same tag
- Moment.js doesn't change locale
- create-react-app build service-worker.js and manifest.json not found
- Continuously watch for a condition to be true without render in ReactJs
- React Router v6 rendering blank page
- React js: fail to get specific product data when clicking on one product
- how to customize blueprintjs appearance in create-react-app
- React Native: How to set <TextInput/>'s height and width to <View/> container?
- Can I track nested object changes in React Context?
- Derived state from props on React "truncate text" component
- How to save state to url?
- CardMedia height material-ui
- React dynamic render html
- Inverse map and use if inside a map method
- Table in Reactjs Data Structures
- Is there a way of using the useState hook to toggle className in react?
- How to use getInitialProps in _app.js file with function component?
- Get data properly from an API with React
- The data from sample-api not displaying based on webpack-react app
- Reload ReactJS page in development returns me blank
- Function firing twice on click in React component
- Converting 'Enter' key event into a empty string or null in react
- react-datepicker accepting older dates those are disabled using minDate property
- Using calc() in MUI
- how to make .eslintrc accept single quotes
- Material-UI : Pass props to useStyles when using Array.map()
- React Routes - different styling on body css tag
- Make custom radio control accessible to screen readers
- What is causing the bug in "mix-blend-mode mode" with .mp4 on Firefox?
- Redux - How to handle multiple actions of the same type at the same time
- Trying to make a to-do-list using react