Add loading progress indicator

[hatemhosny]

What kind of change does this PR introduce?
Feature

What is the current behavior?
During navigation, there is no indicator that a network request is being made e.g API call or lazy loaded module. The user may think the app is not responding.

What is the new behavior (if this is a feature change)?
This is a an automatic loading progress bar and spinner using pace.js.
It works out of the box without the need for any manual configurations.
It automatically shows a loading progress indicator when a network request is made, without the need to explicitly call any code.

Other information:
pace.min.js and pace-theme-flash.scss are placed in /assets/vendors/pace/ and added to .angular-cli.json to be loaded by angular.
the color of the indicator is set in pace-theme-flash.scss using the theme variable nb-theme(color-fg-highlight)

refer to pace.js documentation for advanced configurations.

[tkmawarire]

Working just fine.

[hatemhosny]

The loading indicator can be changed by editing pace-theme-flash.scss based on pace.js themes

https://github.com/HubSpot/pace/tree/master/themes

[nnixaa]

Hey @hatemhosny, that's a great PR. Could you re-do it to use npm for dependencies and not copying the 3rd party modules into the project?

[hatemhosny]

Thank you, @nnixaa. I have changed it to use pace-js npm package.
currently, it is loading the green flash pace.js theme.
I'm not totally familiar with the nebular theming system. please advise where is the recommended place to add global custom styling rules to use nebular theme variables, for the color of the progress indicator.
like here

[nnixaa]

@hatemhosny great! Sure, here are the steps:

1. add js/css dependencies into the angular-cli.json // you done this already
2. create custom scss pace theme here https://github.com/akveo/ngx-admin/tree/master/src/app/%40theme/styles , as pace.theme.scss
3. make this file to define a scss mixin (like for example we did this for smart table component here https://github.com/akveo/nebular/blob/master/src/framework/theme/styles/global/tables/_smart-table.theme.scss), so the @mixin ngx-pace-theme() mixin
4. define there any styles you want to modify (as you already imported the original pace theme in angular-cli.json, and only need styles you want to overwrite) with help of nb-theme(var-name) method
5. import your pace.theme.scss here https://github.com/akveo/ngx-admin/blob/master/src/app/%40theme/styles/styles.scss#L7 and include your mixing here https://github.com/akveo/ngx-admin/blob/master/src/app/%40theme/styles/styles.scss#L13

That's it. This way your styles will be multiplied per each theme so that they will use the variables of the current enabled theme.

[hatemhosny]

Thank you, @nnixaa for the clear guide.

I have done the suggested changes (I'm not sure why it does not show here).

Notes:

I use the theme variable color-fg-highlight. Do you think that is the most suitable variable to use?

I added to .angular-cli.json a template css ../node_modules/pace-js/templates/pace-theme-flash.tmpl.css rather than a selected color ../node_modules/pace-js/themes/green/pace-theme-flash.css.
The rational for this is that adding a selected color theme will make the loading indicator work with that color before angular loads (during the initial page load), then the color changes to the theme variable.

the other alternative would be adding .pace{display:none;} to index.html, then add in pace.theme.scss:
.pace {display: block; } .pace-inactive {display: none;}
I think just using the template is more elegant.

let me know what you think

[nnixaa]

It looks and works great! One last thing - can we remove the loading circle on the right and leave just the loading line so that it looks cleaner?

[hatemhosny]

done...

I have commented it out, in case somebody wants to get it back.

[nnixaa]

@hatemhosny awesome! Many thanks for this, merging now. Looking forward to new PRs 👍