From 872f63e1398231b1ef5caa7676e18dbedc652c0c Mon Sep 17 00:00:00 2001
From: Kristijan Mitrovic <kmitrovic@itekako.com>
Date: Tue, 5 May 2020 15:36:41 +0200
Subject: [PATCH] Set loading image src in a single place

---
 src/_components/TotpModal.vue              |  8 +++++---
 src/_store/index.js                        | 11 +++++++++++
 src/account/DevicesPage.vue                |  6 ++++--
 src/account/NetworkPage.vue                | 12 +++++++-----
 src/account/NewNetworkPage.vue             |  6 ++++--
 src/account/profile/ChangePasswordPage.vue |  8 +++++---
 src/account/profile/PolicyPage.vue         |  8 +++++---
 src/account/profile/ProfilePage.vue        |  6 ++++--
 src/account/profile/SetPasswordPage.vue    |  6 ++++--
 src/account/profile/SshKeysPage.vue        |  6 ++++--
 src/auth/ActivationPage.vue                |  7 +++++--
 src/auth/ForgotPasswordPage.vue            |  6 ++++--
 src/auth/LoginPage.vue                     |  8 +++++---
 src/auth/RegisterPage.vue                  |  6 ++++--
 14 files changed, 71 insertions(+), 33 deletions(-)

diff --git a/src/_components/TotpModal.vue b/src/_components/TotpModal.vue
index ee310c4..2fa2607 100644
--- a/src/_components/TotpModal.vue
+++ b/src/_components/TotpModal.vue
@@ -13,7 +13,7 @@
                 <button class="btn btn-primary" :disabled="status.authenticating || token === null || token.length < 6">
                     {{messages.button_label_submit_totp_code}}
                 </button>
-                <img v-show="status.authenticating" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.authenticating" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -21,7 +21,8 @@
 
 <script>
     import { mapState, mapActions } from 'vuex';
-    import { util } from '../_helpers'
+    import { util } from '../_helpers';
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data() {
@@ -29,7 +30,8 @@
                 submitted: false,
                 token: '',
                 refresher: null,
-                showTotpModal: false
+                showTotpModal: false,
+                loadingImgSrc: loadingImgSrc
             };
         },
         created() {
diff --git a/src/_store/index.js b/src/_store/index.js
index 2e2f651..d44a131 100644
--- a/src/_store/index.js
+++ b/src/_store/index.js
@@ -40,6 +40,17 @@ export const store = new Vuex.Store({
 });
 
 export const safeEval = require('safe-eval');
+export const loadingImgSrc = 'data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4'
+                             + 'wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2'
+                             + 'MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63'
+                             + 'P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAA'
+                             + 'EAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQo'
+                             + 'AAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TA'
+                             + 'AAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsG'
+                             + 'o/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3'
+                             + 'lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTA'
+                             + 'UkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMT'
+                             + 'CpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==';
 
 function evalInContext(vue, string) {
     try {
diff --git a/src/account/DevicesPage.vue b/src/account/DevicesPage.vue
index e8e9b8e..e4ed7c7 100644
--- a/src/account/DevicesPage.vue
+++ b/src/account/DevicesPage.vue
@@ -86,7 +86,7 @@
             <hr/>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading || !addDeviceReady">{{messages.button_label_add_device}}</button>
-                <img v-show="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading" :src="loadingImgSrc" />
             </div>
         </form>
 
@@ -119,6 +119,7 @@
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../_helpers';
     import config from 'config';
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data () {
@@ -131,7 +132,8 @@
                 displayVpnConfig: {},
                 displayDeviceHelp: {},
                 config: config,
-                mitmLoading: true
+                mitmLoading: true,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/NetworkPage.vue b/src/account/NetworkPage.vue
index 2736593..b006b46 100644
--- a/src/account/NetworkPage.vue
+++ b/src/account/NetworkPage.vue
@@ -58,7 +58,7 @@
                     :disabled="loading && loading.requestNetworkKeys">
                 {{messages.link_network_action_request_keys}}
             </button>
-            <img v-show="loading && loading.requestNetworkKeys" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+            <img v-show="loading && loading.requestNetworkKeys" :src="loadingImgSrc" />
             <div v-if="errors.has('networkKeys')" class="invalid-feedback d-block">{{ errors.first('networkKeys') }}</div>
             <div v-if="networkKeysRequested && networkKeysRequested === networkId">{{messages.message_network_action_keys_requested}}</div>
             <hr />
@@ -79,7 +79,7 @@
                 <button class="btn btn-secondary" :disabled="loading && loading.retrieveNetworkKeys">
                     {{ messages.button_label_retrieve_keys }}
                 </button>
-                <img v-show="loading && loading.retrieveNetworkKeys" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading && loading.retrieveNetworkKeys" :src="loadingImgSrc" />
             </form>
             <div v-if="networkKeys">
                 <hr />
@@ -117,8 +117,9 @@
 </template>
 
 <script>
-    import { mapState, mapActions, mapGetters } from 'vuex'
-    import { util } from '../_helpers'
+    import { mapState, mapActions, mapGetters } from 'vuex';
+    import { util } from '../_helpers';
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data() {
@@ -128,7 +129,8 @@
                 stats: null,
                 refresher: null,
                 restoreKeyCode: null,
-                restoreKeyPassword: null
+                restoreKeyPassword: null,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/NewNetworkPage.vue b/src/account/NewNetworkPage.vue
index ed44c1a..8fe6cf3 100644
--- a/src/account/NewNetworkPage.vue
+++ b/src/account/NewNetworkPage.vue
@@ -299,7 +299,7 @@
 
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading() || !isComplete" @click="launchBubble()">{{messages.button_label_create_new_network}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
         </form>
         </div>
@@ -309,6 +309,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex'
     import { util } from '../_helpers'
+    import { loadingImgSrc } from '../_store';
 
     // convenience methods
     import { isAuthenticator, isNotAuthenticator } from '../_store/users.module';
@@ -367,7 +368,8 @@
                 firstContact: null,
                 payMethods: null,
                 accountPayMethods: null,
-                selectedPaymentMethod: null
+                selectedPaymentMethod: null,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/profile/ChangePasswordPage.vue b/src/account/profile/ChangePasswordPage.vue
index 9a6848e..2dd819f 100644
--- a/src/account/profile/ChangePasswordPage.vue
+++ b/src/account/profile/ChangePasswordPage.vue
@@ -19,7 +19,7 @@
                 </div>
                 <div class="form-group">
                     <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_request_password_reset}}</button>
-                    <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                    <img v-show="loading()" :src="loadingImgSrc" />
                 </div>
             </div>
             <div v-else>
@@ -49,7 +49,7 @@
 
                 <div class="form-group">
                     <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_change_password}}</button>
-                    <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                    <img v-show="loading()" :src="loadingImgSrc" />
                 </div>
             </div>
 
@@ -60,6 +60,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     export default {
         data() {
@@ -75,7 +76,8 @@
                 totpToken: null,
                 hasRequiredAuthenticator: null,
                 hasRequiredExternalAuth: null,
-                requiredExternalAuthContacts: []
+                requiredExternalAuthContacts: [],
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/account/profile/PolicyPage.vue b/src/account/profile/PolicyPage.vue
index 5248ad7..f7cbb57 100644
--- a/src/account/profile/PolicyPage.vue
+++ b/src/account/profile/PolicyPage.vue
@@ -55,7 +55,7 @@
             <hr/>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_update_policy}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
 
         </form>
@@ -329,7 +329,7 @@
             <hr/>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading() || !newContactValid">{{messages.button_label_add_contact}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
         </form>
 
@@ -339,6 +339,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     // convenience methods
     import { isAuthenticator, isNotAuthenticator } from '../../_store/users.module';
@@ -386,7 +387,8 @@
                 newContact: initNewContact(),
                 verifyingContact: null,
                 inboundAction: null,
-                watchedPolicy: null
+                watchedPolicy: null,
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/account/profile/ProfilePage.vue b/src/account/profile/ProfilePage.vue
index 6dd98d0..e7f531b 100644
--- a/src/account/profile/ProfilePage.vue
+++ b/src/account/profile/ProfilePage.vue
@@ -99,7 +99,7 @@
             <div class="form-group">
                 <button v-if="newUser === null || newUser === false || admin !== true" class="btn btn-primary" :disabled="loading()">{{messages.button_label_update_profile}}</button>
                 <button v-else class="btn btn-primary" :disabled="loading()">{{messages.button_label_create_account}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -108,6 +108,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     const BLANK_SUBJECT = {
         name: null,
@@ -136,7 +137,8 @@
                 admin: false,
                 newUser: null,
                 submitted: false,
-                subject: Object.assign({}, BLANK_SUBJECT)
+                subject: Object.assign({}, BLANK_SUBJECT),
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/account/profile/SetPasswordPage.vue b/src/account/profile/SetPasswordPage.vue
index d3925a9..528215f 100644
--- a/src/account/profile/SetPasswordPage.vue
+++ b/src/account/profile/SetPasswordPage.vue
@@ -25,7 +25,7 @@
 
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading()">{{messages.button_label_set_password}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
 
         </form>
@@ -36,6 +36,7 @@
 <script>
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
+    import { loadingImgSrc } from '../../_store';
 
     export default {
         data() {
@@ -46,7 +47,8 @@
                 newPasswordConfirm: null,
                 code: null,
                 showTotp: false,
-                totpToken: null
+                totpToken: null,
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/account/profile/SshKeysPage.vue b/src/account/profile/SshKeysPage.vue
index 9b10ede..2a7d40b 100644
--- a/src/account/profile/SshKeysPage.vue
+++ b/src/account/profile/SshKeysPage.vue
@@ -53,7 +53,7 @@
 
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="loading() || !newKeyValid">{{messages.button_label_add_ssh_key}}</button>
-                <img v-show="loading()" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="loading()" :src="loadingImgSrc" />
             </div>
 
         </form>
@@ -64,6 +64,7 @@
     import { mapState, mapActions, mapGetters } from 'vuex';
     import { util } from '../../_helpers';
     import { Settings } from 'luxon';
+    import { loadingImgSrc } from '../../_store';
 
     export default {
         data() {
@@ -77,7 +78,8 @@
                 expiration: null,
                 sshPublicKey: null,
                 minExpiration: (new Date()).toISOString(),
-                timezone: null
+                timezone: null,
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/auth/ActivationPage.vue b/src/auth/ActivationPage.vue
index 65201e0..a7c4359 100644
--- a/src/auth/ActivationPage.vue
+++ b/src/auth/ActivationPage.vue
@@ -84,7 +84,7 @@
 
         <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.activating">{{messages.button_label_activate}}</button>
-                <img v-show="status.activating" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.activating" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -92,6 +92,7 @@
 
 <script>
     import { mapState, mapActions } from 'vuex'
+    import { loadingImgSrc } from '../_store';
 
     function toCredentialsMap(creds) {
         const map = {};
@@ -127,7 +128,9 @@
                 domainName: null,
                 publicDns: null,
 
-                displayShowAllCheckbox: null
+                displayShowAllCheckbox: null,
+
+                loadingImgSrc: loadingImgSrc
             };
         },
         computed: {
diff --git a/src/auth/ForgotPasswordPage.vue b/src/auth/ForgotPasswordPage.vue
index ed23bb5..9fd21e4 100644
--- a/src/auth/ForgotPasswordPage.vue
+++ b/src/auth/ForgotPasswordPage.vue
@@ -11,7 +11,7 @@
             </div>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.sendingResetPasswordMessage === true">{{messages.button_label_resetPassword}}</button>
-                <img v-show="status.sendingResetPasswordMessage === true" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.sendingResetPasswordMessage === true" :src="loadingImgSrc" />
             </div>
         </form>
     </div>
@@ -20,12 +20,14 @@
 <script>
     import { mapState, mapActions } from 'vuex'
     import { util } from '../_helpers'
+    import { loadingImgSrc } from '../_store';
 
     export default {
         data () {
             return {
                 name: '',
-                submitted: false
+                submitted: false,
+                loadingImgSrc: loadingImgSrc
             }
         },
         computed: {
diff --git a/src/auth/LoginPage.vue b/src/auth/LoginPage.vue
index dcd4ec3..76d6f1c 100644
--- a/src/auth/LoginPage.vue
+++ b/src/auth/LoginPage.vue
@@ -32,7 +32,7 @@
             <div class="form-group">
                 <div><small v-html="messages.message_login_agreeToTerms"></small><hr/></div>
                 <button class="btn btn-primary" :disabled="status.loggingIn">{{messages.button_label_login}}</button>
-                <img v-show="status.loggingIn" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.loggingIn" :src="loadingImgSrc" />
                 <router-link v-if="configs && configs.allowRegistration" to="/register" class="btn btn-link">{{messages.button_label_register}}</router-link>
             </div>
             <div class="form-group">
@@ -44,6 +44,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex';
+import { loadingImgSrc } from '../_store';
 
 export default {
     data () {
@@ -53,7 +54,8 @@ export default {
             totpToken: null,
             unlockKey: (this.$route.query && this.$route.query.k) ? this.$route.query.k : null,
             showTotp: false,
-            submitted: false
+            submitted: false,
+            loadingImgSrc: loadingImgSrc
         }
     },
     created () {
@@ -88,4 +90,4 @@ export default {
         }
     }
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/auth/RegisterPage.vue b/src/auth/RegisterPage.vue
index ef1c889..ef6307e 100644
--- a/src/auth/RegisterPage.vue
+++ b/src/auth/RegisterPage.vue
@@ -71,7 +71,7 @@
             </div>
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.registering">{{messages.button_label_register}}</button>
-                <img v-show="status.registering" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
+                <img v-show="status.registering" :src="loadingImgSrc" />
                 <router-link to="/login" class="btn btn-link">{{messages.button_label_cancel}}</router-link>
             </div>
         </form>
@@ -81,6 +81,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import { util } from '../_helpers';
+import { loadingImgSrc } from '../_store';
 
 export default {
     data () {
@@ -101,7 +102,8 @@ export default {
             selectedPaymentMethod: null,
             paymentMethodObject: null,
             confirmPassword: '',
-            submitted: false
+            submitted: false,
+            loadingImgSrc: loadingImgSrc
         }
     },
     computed: {