diff --git a/js/views/loadingView.js b/js/views/loadingView.js index 9968207fcb9..b6f73046bc6 100644 --- a/js/views/loadingView.js +++ b/js/views/loadingView.js @@ -1,10 +1,10 @@ (function(ionic) { 'use strict'; /** - * An ActionSheet is the slide up menu popularized on iOS. + * Loading * - * You see it all over iOS apps, where it offers a set of options - * triggered after an action. + * The Loading is an overlay that can be used to indicate + * activity while blocking user interaction. */ ionic.views.Loading = ionic.views.View.inherit({ initialize: function(opts) { @@ -14,6 +14,8 @@ this.maxWidth = opts.maxWidth || 200; + this.showDelay = opts.showDelay || 0; + this._loadingBox = this.el.querySelector('.loading'); }, show: function() { @@ -29,13 +31,19 @@ lb.style.marginLeft = (-lb.offsetWidth) / 2 + 'px'; lb.style.marginTop = (-lb.offsetHeight) / 2 + 'px'; - _this.el.classList.add('active'); + // Wait 'showDelay' ms before showing the loading screen + this._showDelayTimeout = window.setTimeout(function() { + _this.el.classList.add('active'); + }, _this.showDelay); } }, hide: function() { // Force a reflow so the animation will actually run this.el.offsetWidth; + // Prevent unnecessary 'show' after 'hide' has already been called + window.clearTimeout(this._showDelayTimeout); + this.el.classList.remove('active'); } });