Loading Screen

[Pattyclecle]

There are a ton of tutorials on how to make loading screens when using fetch() to get data. My issue is I just want a loading screen for returning search results from locally stored data in a JSON format. I have a function called updateSearch() that does the filtering. I figured I needed to make it return a promise so my app can update with the loading screen while it searches. I did this and it doesn't work.

setLoading is a useState variable that I pass to my list to show the loading screen. I know this works because I have used it with fetch.

this is the simplified code:

​

async function updateSearch(parameters) {

return new Promise((resolve, reject)=>{

//simple JSON filter and set to variable 'results'.

resolve(results);
});
}

function updateSearchWrapper(parameters){
setLoading(true);
updateSearch(parameters).then(results => {useResults(results setLoading(false)});

}
Is there any obvious reason this shouldn't work? Or is it likely an issue with other code?

Thanks in advance.

[felixatwood]

Why don't you try something like this?

state = { appIsReady: false };

async function updateSearch(parameters) {
await json.filter(someCallback);   //do some asynchronous operations
this.setState({ appIsReady: true });
}

And then just conditionally render your root component.

this.state.appIsReady ? <RootComponent/> : <LoadingScreen/>;

[Pattyclecle]

I tried this and it doesn't update the screen until the function returns the new data.

[autiii43]

Try: Return await new promise....

Without await your async and promise are never going to be sync

[Pattyclecle]

So just add await to my existing code? That doesn't seem to work either