Repository: zeppelin Updated Branches: refs/heads/master 48193d92a -> cdbdfd573
[ZEPPELIN-3723] Pre-Loader for Zeppelin UI Given the size of vendor.js (2.6MB) alone, and the project has various other CSS and JS as well. I think it makes sense to have a pre-loader screen if in case Zeppelin was running behind a slow network/proxy. [Improvement] * [ZEPPELIN-3723](https://issues.apache.org/jira/browse/ZEPPELIN-3723) * Check Screenshots  * Does the licenses files need update? N/A * Is there breaking changes for older versions? N/A * Does this needs documentation? N/A Author: Prabhjyot Singh <prabhjyotsi...@gmail.com> Closes #3144 from prabhjyotsingh/ZEPPELIN-3723 and squashes the following commits: 43a8d986e [Prabhjyot Singh] Align color with Zeppelin color theme cbc44b074 [Prabhjyot Singh] ZEPPELIN-3723: Pre-Loader for Zeppelin UI Change-Id: Id18224b14317ad6625fccc24d70389e9f1417404 Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/cdbdfd57 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/cdbdfd57 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/cdbdfd57 Branch: refs/heads/master Commit: cdbdfd573ea7b1951cb2ace53aeeb6d632b131b5 Parents: 48193d9 Author: Prabhjyot Singh <prabhjyotsi...@gmail.com> Authored: Fri Aug 17 13:27:23 2018 +0530 Committer: Prabhjyot Singh <prabhjyotsi...@gmail.com> Committed: Sat Aug 18 09:40:27 2018 +0530 ---------------------------------------------------------------------- zeppelin-web/src/app/app.js | 1 + .../src/components/loader/loader.service.js | 27 ++++++++++++ zeppelin-web/src/index.html | 44 ++++++++++++++++++++ zeppelin-web/src/index.js | 1 + 4 files changed, 73 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cdbdfd57/zeppelin-web/src/app/app.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js index 64ceff0..826829a 100644 --- a/zeppelin-web/src/app/app.js +++ b/zeppelin-web/src/app/app.js @@ -173,6 +173,7 @@ let zeppelinWebApp = angular.module('zeppelinWebApp', requiredModules) function auth() { let $http = angular.injector(['ng']).get('$http'); let baseUrlSrv = angular.injector(['zeppelinWebApp']).get('baseUrlSrv'); + angular.injector(['zeppelinWebApp']).get('loaderSrv').hideLoader(); // withCredentials when running locally via grunt $http.defaults.withCredentials = true; jQuery.ajaxSetup({ http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cdbdfd57/zeppelin-web/src/components/loader/loader.service.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/loader/loader.service.js b/zeppelin-web/src/components/loader/loader.service.js new file mode 100644 index 0000000..589bb76 --- /dev/null +++ b/zeppelin-web/src/components/loader/loader.service.js @@ -0,0 +1,27 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +angular.module('zeppelinWebApp').service('loaderSrv', LoaderService); + +function LoaderService() { + 'ngInject'; + + this.showLoader = function() { + angular.element('#pre-loader').fadeIn(); + }; + + this.hideLoader = function() { + angular.element('#pre-loader').fadeOut(); + }; +} http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cdbdfd57/zeppelin-web/src/index.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index ee707c1..fb831c8 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -69,8 +69,52 @@ limitations under the License. <!-- endbuild --> <link rel="stylesheet" ng-href="assets/styles/looknfeel/{{looknfeel}}.css" /> <link rel="stylesheet" href="assets/styles/printMode.css" /> + <style> + + /* This is kept here puropsly to show preloader */ + #pre-loader { + height: 100%; + min-height: 100%; + background-color: #ECF0F1; + width: 100%; + position: fixed; + top: 0px; + margin-left: -8px; + z-index: 99 + } + + .pre-loader-content { + position: absolute; + top: 45%; + left: 50% + } + + .loader { + border: 4px solid #666666; + border-top: 4px solid #3071A9; + border-radius: 50%; + width: 30px; + height: 30px; + animation: spin 1s linear infinite; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + </style> </head> <body ng-class="{'bodyAsIframe': asIframe}"> + <div id="pre-loader"> + <div class="pre-loader-content"> + <div class="loader"></div> + <div style="margin-top: 5px; margin-left: -10px;">Loading ...</div> + </div> + </div> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/";>upgrade your browser</a> to improve your experience.</p> <![endif]--> http://git-wip-us.apache.org/repos/asf/zeppelin/blob/cdbdfd57/zeppelin-web/src/index.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/index.js b/zeppelin-web/src/index.js index 55d6155..19d2d3e 100644 --- a/zeppelin-web/src/index.js +++ b/zeppelin-web/src/index.js @@ -71,6 +71,7 @@ import './components/websocket/websocket-message.service.js'; import './components/websocket/websocket-event.factory.js'; import './components/note-list/note-list.factory.js'; import './components/base-url/base-url.service.js'; +import './components/loader/loader.service'; import './components/login/login.controller.js'; import './components/note-action/note-action.service.js'; import './components/note-rename/note-rename.controller.js';
