Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spinner component & service #43

Conversation

@LotteHofstede
Copy link
Contributor

LotteHofstede commented Jan 25, 2017

This PR connects to #24

I created a Spinner component that can be displayed when content is loading.
The SpinnerService manages the status of the spinner, which can be activated and deactivated.

A SpinnerWrapper component was created to combine and switch between the SpinnerComponent and whichever content you wish to render.

For now, the SpinnerWrapper is used in app.component.html and uses the "router-outlet" as content to show when the Spinner is deactivated.
To illustrate the behaviour of the spinner, I added a small timeout delay in the HomeComponent to switch the spinner on and off.
For real-life use cases, you would activate the spinner before you start loading content and deactivate it when all content is available and ready to be rendered.

The Spinner was created using http://loading.io/ and only uses HTML/CSS. The Spinner template consists of a number of empty divs that are necessary to render the Spinner.

This PR is dependent on PR #39

@sourcedump

This comment has been minimized.

Copy link
Contributor

sourcedump commented Feb 2, 2017

Hello!
LGTM but I think we should have something like this example:
https://codepen.io/MattIn4D/pen/LiKFC
where we have a page centered spinner and a partial transparent overlay.
Let me know if you agree.

@artlowel

This comment has been minimized.

Copy link
Member

artlowel commented Feb 6, 2017

I'm not a big fan of an overlay, and properly centering the spinner vertically may take more effort than we'd like to put in to style at this stage, but I would like to see it centered horizontally, and made smaller, say, half its current size?

@artlowel

This comment has been minimized.

Copy link
Member

artlowel commented Mar 22, 2017

Closing, in favour of #73

@artlowel artlowel closed this Mar 22, 2017
@artlowel artlowel removed the needs review label Mar 22, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.