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

feat(stark-starter): add preloading screens #848

Merged

Conversation

carlo-nomes
Copy link
Collaborator

@carlo-nomes carlo-nomes commented Nov 12, 2018

ISSUES CLOSED: #840 #596 #597

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

There is no warning for enabling JavaScript or upgrading the browser and when Angular is loading the only thing shown is loading...

Issue Number: #840 #596 #597

What is the new behavior?

  • Added a loading screen for when Angular is starting up.
  • Added a warning screen for when JavaScript is not enabled in the browser.
  • Added a warning for when the browser is not supported.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to
improve your experience.</p>
<p>You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we keep this, then we should point to the https version instead: https://browsehappy.com/

<div class="content">
<h1>Browser not supported</h1>
<p>You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here

@carlo-nomes carlo-nomes force-pushed the feature/preload-screens branch 2 times, most recently from 5351b17 to b5a6c9c Compare November 12, 2018 14:48
@coveralls
Copy link

coveralls commented Nov 12, 2018

Coverage Status

Coverage remained the same at 93.526% when pulling 844e0fe on cnomes:feature/preload-screens into 229e04c on NationalBankBelgium:master.

@carlo-nomes
Copy link
Collaborator Author

carlo-nomes commented Nov 12, 2018

@christophercr, I updated the PR.

Copy link
Collaborator

@christophercr christophercr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some small remarks ;)

<app class="stark-app">
<div class="stark-loading stark-preload-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
<header><i></i></header>
<divs class="content">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<divs>? I think you meant <div>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did. 😅

display: block;
}

.stark-preload-ui-page h1 {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we rename the stark-preload-ui-page? I think that "ui-page" is not 100% accurate since it is not a page itself...

@@ -6,14 +6,16 @@
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>

<meta name="description" content="{%= htmlWebpackPlugin.options.starkAppMetadata.description %}">
<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, we didn't notice it before.. thanks!

@@ -0,0 +1,93 @@
/* Hide the app / loader / browser warning until it is determined if JS is enabled and the if the browser is compatible */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typo: "and the if the browser..." -> "and if the browser..."

@carlo-nomes carlo-nomes force-pushed the feature/preload-screens branch from b5a6c9c to 4022058 Compare November 13, 2018 13:54
Added a loading screen for when Angular is starting up.
Added a warning screen for when JavaScript
is not enabled in the browser.
Added a warning for when the browser is not supported.

ISSUES CLOSED: NationalBankBelgium#840 NationalBankBelgium#596 NationalBankBelgium#597
@carlo-nomes carlo-nomes force-pushed the feature/preload-screens branch from 4022058 to 844e0fe Compare November 13, 2018 15:08
@christophercr christophercr merged commit bba9f20 into NationalBankBelgium:master Nov 13, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui: loading - display a nice "loading" animation while the app is being loaded
4 participants