fix conflict, keep the touchable button big

1 files changed, 15 insertions, 3 deletions

diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 4efebb3c..b15e7d38 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,12 +1,25 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <i class="icon-spin4 animate-spin" />
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="3x"
+      />
       {{ $t('general.loading') }}
     </span>
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+</script>
+
 <style lang="scss">
 @import 'src/_variables.scss';
 
@@ -18,8 +31,7 @@
   font-size: 2em;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  .loading-text i {
-    font-size: 3em;
+  .loading-text svg {
     line-height: 0;
     vertical-align: middle;
     color: $fallback--text;