Hi
I have a emberjs app with a form. The user fills out the form then clicks the search button. The search button passes what the user entered into the form to a nodejs back-end api that I created.
How would I add a spinner or loading display while the api is attempting to return data. Right now the user clicks search and the screen just locks up/hangs until the results are returned. Sometimes its fast and sometimes depending on the back-end servers it can take longer.
I’ve tried different option. But none are working so far. What would be the best way to do this?
Should I create a temporary route when the user clicks search. But how would I pass the form contents to the temporary route, then off to the api, while still displaying the temporary route, until the api returns the data to display?
Right now my app only has one component for the entire app.
Thank you for your help… I can provide my full code if needed…
You could use a route for this, but if you’re making async requests in a component (where you don’t have the nice things routes provide like error/loading states) then I prefer to encapsulate the async requests in ember-concurrency tasks. EC tasks are cancellable and have much nicer wrappers in a taskInstance that give you loading/error state information (taskInstance.isRunning) which you can easily use to display a loading spinner while the task is running.
You can accomplish something similar with just promises but it will be a lot more verbose and require a lot more consideration of edge cases.
Anyway in broad strokes you’d want to wrap your async code in an ember concurrency task, perform the task when the form is submitted, display a loading state while taskInstance.isRunning and then show the results when the task has successfully completed. Ember concurrency has really great docs so try reading them over and checking it out, and if you have any issues try asking here or in the Discord channel.
Thanks Dan, I will try out what you suggest.
I also noticed addons like this… It seems to work but its showing the loading alert in unexpected places. I think its fairly outdated. Since it references " You can customize this addon in your environment/config.js" The environment is now in its own environment.js not a environment directory correct?
https://github.com/mike-north/ember-load
Nope, env config should reside in the environment folder as per docs. Also I believe ember-concurrency is as up to date as an add-on with such complexity can be. 
We (and many others) are using it in our production application.
Could you please share the weird behavior you experienced around loading state?