There is still no loader/spinner component in Ionic 2, right? What would be the best way to fade out the screen and create a spinner while fetching ajax data, for example?
Is it possible to at least reuse the Ionic 2 fade overlay somehow, or would I need to create it all from scratch?
Thanks!
That seems great, but how would you call it in Ionic 2?
Sorry haven’t started ionic v2 yet 
I dug a lot and started using the alert for this, but that one is heavely dependent on the time it takes to transition, in the end i end up making a new component and a service controller that is always in the html just under the nav component in app.html.
I reused the Alert html but used css transitions and a class to show or hide the progress indicator, which uses a FortAwesome (previously Font Awesome) refresh spinner.
Very happy with it, but still waiting for the ionic team implementation.
I saw this post last night and started doing the same thing but didn’t get it finished before bed - pretty much took the same approach as you, would be good to see how you implemented it though if you don’t mind sharing.
Of course not, here, have a gist and comment any ideas, always room for improvement:
https://gist.github.com/Luchillo/fc3d01f29580d5067541
@brandyshea maybe this can show how useful and needed feature it is, so much that we had to implement it on our own.
This is in the works…
This looks great, tho I’ve tried a much more simpler approach by creating a new component without any dependencies. It’s basically a semi-transparent overlay with a css animated spinner in the middle. The overlay has a high z-index and covers everything, hence also stopping tapping, et.c.
The component has a few methods like showSpinner() and hideSpinner(), which basically just toggle the visibility of the overlay.
It’s simple, but it works. At least, I think so, we’ll see when it gets integrated i a few more places in the app.
I did it like this because i didn’t want the full component as a dependency, instead i call the smaller injectable inside another injectable that calls the next(true) method, that way the only component that only needs the full busy-component is the app, all other components use the light weight controller.
Tough the code is pretty simple, maybe it’s not worth the trouble to have the controller, are you calling the methods directly in the component?
How did you manage to do this? for me i don’t have access to the internals of the component class., that’s one of the reasons i had to make a controller.
How to make it work? Any example?
<busyComponent isBusy='true'></busyComponent>
import {Page} from 'ionic/ionic';
import {BusyComponent} from '../../components/busy-component/busy-component';
@Page({
templateUrl: 'build/pages/home/home.html',
directives:[BusyComponent]
})
I’m sure the way I pass the isBusy is wrong. How am I supposed to do that? Thanks.
PS: The component is loaded (I can see it in my web inspector). But the spinner is not showing.
My gist in the previous post should get you on track, is very well explained, @crkvend says he made it work without an Injectable but he doesn’t explain a lot about his approach.[quote=“luchillo17, post:7, topic:42007”]
https://gist.github.com/Luchillo/fc3d01f29580d5067541
[/quote]
Sorry, don’t quite understand how to make it work correctly. I’m still new in angular 2 and ionic 2. Please refer to my code above, I can actually see the component already but can’t see the spinner working. Any chance to show me a simple example? Thanks.
The gist explain my approach with fine detail, you need to actually go to the gist in github to see the description without being truncated, anyway if i explain you more than what the gist have, i’m making your homework, i’m even giving you the code aside of explaining how to use it 
I went through the gist already. It only explains how their component created but never show anything on how to use it. Anyway I may need to study more on Angular 2. Thanks.
I guess i have to edit it again and try explain it better.
Any further idea when something like this will become available in Ionic 2?