diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 6387e2fd2e8..7826cc9b94a 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -65,8 +65,6 @@ //= require bower_components/codemirror/mode/shell/shell //= require bower_components/codemirror/mode/xml/xml //= require bower_components/codemirror/mode/yaml/yaml -//= require bower_components/spin.js/spin -//= require bower_components/spin.js/jquery.spin //= require jquery-hotkeys //= require ./miq_formatters //= require ./miq_grid diff --git a/app/assets/javascripts/miq_application.js b/app/assets/javascripts/miq_application.js index 50d068331de..b8713ca5cb2 100644 --- a/app/assets/javascripts/miq_application.js +++ b/app/assets/javascripts/miq_application.js @@ -1018,33 +1018,48 @@ function miqQsEnterEscape(e) { // Start/stop the JS spinner function miqSpinner(status) { - var opts = { - lines: 15, // The number of lines to draw - length: 18, // The length of each line - width: 4, // The line thickness - radius: 25, // The radius of the inner circle - color: '#fff', // #rgb or #rrggbb - trail: 60, // Afterglow percentage - className: 'miq-spinner', // The CSS class to assign to the spinner - }; + if (! miqSpinner.spinner) { + miqSpinner.spinner = new Spinner({ + lines: 15, // The number of lines to draw + length: 18, // The length of each line + width: 4, // The line thickness + radius: 25, // The radius of the inner circle + color: '#fff', // #rgb or #rrggbb + trail: 60, // Afterglow percentage + className: 'miq-spinner', // The CSS class to assign to the spinner + }); + } - $('#spinner_div').spin(status ? opts : false); + if (status) { + var target = document.querySelector('#spinner_div'); + miqSpinner.spinner.spin(target); + } else { + miqSpinner.spinner.stop(); + } } // Start/stop the search spinner function miqSearchSpinner(status) { - var opts = { - lines: 13, // The number of lines to draw - length: 20, // The length of each line - width: 10, // The line thickness - radius: 30, // The radius of the inner circle - color: '#000', // #rgb or #rrggbb or array of colors - trail: 60, // Afterglow percentage - className: 'miq-spinner', // The CSS class to assign to the spinner - }; + if (! miqSearchSpinner.spinner) { + miqSearchSpinner.spinner = new Spinner({ + lines: 13, // The number of lines to draw + length: 20, // The length of each line + width: 10, // The line thickness + radius: 30, // The radius of the inner circle + color: '#000', // #rgb or #rrggbb or array of colors + trail: 60, // Afterglow percentage + className: 'miq-spinner', // The CSS class to assign to the spinner + }); + } $('#search_notification').toggle(!! status); - $('#searching_spinner_center').spin(status ? opts : false); + + if (status) { + var target = document.querySelector('#searching_spinner_center'); + miqSearchSpinner.spinner.spin(target); + } else { + miqSearchSpinner.spinner.stop(); + } } function miqProcessObserveQueue() { diff --git a/app/javascript/packs/application-common.js b/app/javascript/packs/application-common.js index f3a36162d05..ef3bf5e1aed 100644 --- a/app/javascript/packs/application-common.js +++ b/app/javascript/packs/application-common.js @@ -53,3 +53,8 @@ window.http = http; // for Automate > Simulate require('xml_display/XMLDisplay.js'); require('xml_display/XMLDisplay.css'); + +// miqSpinner, miqSearchSpinner +import {Spinner} from 'spin.js'; +import 'spin.js/spin.css'; +window.Spinner = Spinner; diff --git a/bower.json b/bower.json index 3c1e73b7b12..f519d06d246 100644 --- a/bower.json +++ b/bower.json @@ -42,8 +42,7 @@ "patternfly-bootstrap-treeview": "~2.1.5", "patternfly-timeline": "~1.0.5", "phantomjs-polyfill": "~0.0.2", - "qs": "~0.3.10", - "spin.js": "~2.3.2" + "qs": "~0.3.10" }, "resolutions": { "d3": "~3.5.0", diff --git a/package.json b/package.json index e7bbbd67c74..fb6b0267f1b 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "redux-thunk": "^2.3.0", "rxjs": "~5.6.0-forward-compat.2", "spice-html5-bower": "~1.7.2", + "spin.js": "~4.0.0", "sprintf-js": "~1.1.1", "text-encoder-lite": "git://github.com/coolaj86/TextEncoderLite.git#e1e031b", "ui-select": "0.19.8",