diff --git a/src/components/loading/loading.js b/src/components/loading/loading.js
deleted file mode 100644
index bda1ff84bf..0000000000
--- a/src/components/loading/loading.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import './loading.scss';
-
-let loadingElem;
-let layer1;
-let layer2;
-let layer3;
-let layer4;
-let circleLefts;
-let circleRights;
-
-export function show() {
- let elem = loadingElem;
-
- if (!elem) {
- elem = document.createElement('div');
- elem.setAttribute('dir', 'ltr');
- loadingElem = elem;
-
- elem.classList.add('docspinner');
- elem.classList.add('mdl-spinner');
-
- elem.innerHTML = '';
-
- document.body.appendChild(elem);
-
- layer1 = elem.querySelector('.mdl-spinner__layer-1');
- layer2 = elem.querySelector('.mdl-spinner__layer-2');
- layer3 = elem.querySelector('.mdl-spinner__layer-3');
- layer4 = elem.querySelector('.mdl-spinner__layer-4');
-
- circleLefts = elem.querySelectorAll('.mdl-spinner__circleLeft');
- circleRights = elem.querySelectorAll('.mdl-spinner__circleRight');
- }
-
- elem.classList.add('mdlSpinnerActive');
-
- layer1.classList.add('mdl-spinner__layer-1-active');
- layer2.classList.add('mdl-spinner__layer-2-active');
- layer3.classList.add('mdl-spinner__layer-3-active');
- layer4.classList.add('mdl-spinner__layer-4-active');
-
- for (let i = 0, length = circleLefts.length; i < length; i++) {
- circleLefts[i].classList.add('mdl-spinner__circleLeft-active');
- }
-
- for (let i = 0, length = circleRights.length; i < length; i++) {
- circleRights[i].classList.add('mdl-spinner__circleRight-active');
- }
-}
-
-export function hide() {
- const elem = loadingElem;
-
- if (elem) {
- elem.classList.remove('mdlSpinnerActive');
-
- elem.classList.remove('mdl-spinner__layer-1-active');
- elem.classList.remove('mdl-spinner__layer-2-active');
- elem.classList.remove('mdl-spinner__layer-3-active');
- elem.classList.remove('mdl-spinner__layer-4-active');
-
- for (let i = 0, length = circleLefts.length; i < length; i++) {
- circleLefts[i].classList.remove('mdl-spinner__circleLeft-active');
- }
-
- for (let i = 0, length = circleRights.length; i < length; i++) {
- circleRights[i].classList.remove('mdl-spinner__circleRight-active');
- }
- }
-}
-
-const loading = {
- show,
- hide
-};
-
-window.Loading = loading;
-
-export default loading;
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 9d184e7f20..e1a6bb1bd2 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/loading.scss
@@ -27,7 +27,7 @@
border-color: #00a4dc;
}
-.mdl-spinner__layer-1-active {
+.mdlSpinnerActive .mdl-spinner__layer-1 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@@ -35,7 +35,7 @@
border-color: #00a4dc;
}
-.mdl-spinner__layer-2-active {
+.mdlSpinnerActive .mdl-spinner__layer-2 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@@ -43,7 +43,7 @@
border-color: #00a4dc;
}
-.mdl-spinner__layer-3-active {
+.mdlSpinnerActive .mdl-spinner__layer-3 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@@ -51,7 +51,7 @@
border-color: #00a4dc;
}
-.mdl-spinner__layer-4-active {
+.mdlSpinnerActive .mdl-spinner__layer-4 {
animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@@ -224,7 +224,7 @@
transform: rotate(129deg);
}
-.mdl-spinner__circleLeft-active {
+.mdlSpinnerActive .mdl-spinner__circleLeft {
animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@@ -234,7 +234,7 @@
transform: rotate(-129deg);
}
-.mdl-spinner__circleRight-active {
+.mdlSpinnerActive .mdl-spinner__circleRight {
animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
new file mode 100644
index 0000000000..60333f5116
--- /dev/null
+++ b/src/components/loading/loading.ts
@@ -0,0 +1,37 @@
+import './loading.scss';
+
+let loader: HTMLDivElement | undefined;
+
+function createLoader(): HTMLDivElement {
+ const elem = document.createElement('div');
+ elem.setAttribute('dir', 'ltr');
+ elem.classList.add('docspinner');
+ elem.classList.add('mdl-spinner');
+
+ elem.innerHTML = '';
+
+ document.body.appendChild(elem);
+ return elem;
+}
+
+export function show() {
+ if (!loader) {
+ loader = createLoader();
+ }
+ loader.classList.add('mdlSpinnerActive');
+}
+
+export function hide() {
+ if (loader) {
+ loader.classList.remove('mdlSpinnerActive');
+ }
+}
+
+const loading = {
+ show,
+ hide
+};
+
+window.Loading = loading;
+
+export default loading;
diff --git a/src/global.d.ts b/src/global.d.ts
index 6d0d4d40ad..51007c3ab1 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -5,6 +5,10 @@ export declare global {
ApiClient: ApiClient;
Events: Events;
NativeShell: any;
+ Loading: {
+ show();
+ hide();
+ }
}
interface DocumentEventMap {