added spinner into dashboard AlertBox.vue

resources/js/components/FilesView/ButtonBase.vue

@@ -1,7 +1,7 @@
 <template>
     <button class="button-base" :class="buttonStyle" type="button">
         <div v-if="loading" class="icon">
-            <refresh-cw-icon size="16" class="sync-alt" />
+            <refresh-cw-icon size="16" class="animate-spin" />
         </div>
         <div class="content">
             <slot v-if="!loading"></slot>
@@ -93,19 +93,6 @@ export default {
     }
 }
 
-.sync-alt {
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
 .dark {
     .button-base {
         &.secondary {

resources/js/views/Admin/AlertBox.vue

@@ -6,7 +6,17 @@
 			'dark:bg-rose-700/30 bg-rose-200': color === 'rose',
 		}"
 	>
+		<refresh-cw-icon
+			v-if="isLoading"
+			size="18"
+			class="vue-feather mr-4 shrink-0 animate-spin"
+			:class="{
+				'text-green-700 dark:text-green-500': color === 'green',
+				'text-rose-700 dark:text-rose-500': color === 'rose',
+			}"
+		/>
         <alert-octagon-icon
+			v-if="!isLoading"
 			size="18"
 			class="vue-feather mr-4 shrink-0"
 			:class="{
@@ -26,15 +36,17 @@
     </div>
 </template>
 <script>
-	import {AlertOctagonIcon} from "vue-feather-icons";
+	import {AlertOctagonIcon, RefreshCwIcon} from "vue-feather-icons";
 
 	export default {
 		name: 'AlertBox',
 		props: [
+			'isLoading',
 			'color',
 		],
 		components: {
 			AlertOctagonIcon,
+			RefreshCwIcon,
 		}
 	}
 </script>

resources/js/views/Admin/Dashboard.vue

@@ -54,12 +54,12 @@
             </div>
 
             <!--New language strings alert-->
-			<AlertBox v-if="data.app.shouldUpgrade" @click.native.once="upgradeSystem" color="green">
+			<AlertBox v-if="data.app.shouldUpgrade" @click.native.once="upgradeSystem" color="green" :is-loading="isUpgradingApp">
 				There is a new update that needs to upgrade some stuff on your backend. Please click on this box to upgrade.
 			</AlertBox>
 
             <!--New language strings alert-->
-			<AlertBox v-if="data.app.shouldUpgradeTranslations" @click.native.once="upgradeTranslations" color="green">
+			<AlertBox v-if="data.app.shouldUpgradeTranslations" @click.native.once="upgradeTranslations" color="green" :is-loading="isUpgradingLanguages">
 				We detect new language strings. You should <b class="dark:text-green-500 text-green-600 text-sm font-bold underline">upgrade your translations</b>. After that, you can find new translations at the bottom page of your translations in language editor. Please click on this box.
 			</AlertBox>
 
@@ -218,12 +218,16 @@ export default {
     },
     data() {
         return {
+			isUpgradingLanguages: false,
+			isUpgradingApp: false,
             isLoading: false,
             data: undefined,
         }
     },
 	methods: {
 		upgradeTranslations() {
+			this.isUpgradingLanguages = true
+
 			axios.get('/upgrade/translations')
 				.then(() => {
 					this.data.app.shouldUpgradeTranslations = false
@@ -241,6 +245,8 @@ export default {
 				})
 		},
 		upgradeSystem() {
+			this.isUpgradingApp = true
+
 			axios.get('/upgrade/system')
 				.then(() => {
 					this.data.app.shouldUpgrade = false