style: change loading icon

PHPJunior · Sep 8, 2023 · c2d7262 · c2d7262
1 parent 741b318
commit c2d7262
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/resources/js/Components/Bucket/Button/ActivityButton.vue b/resources/js/Components/Bucket/Button/ActivityButton.vue
@@ -3,7 +3,7 @@ import SlideOver from "@components/UI/SlideOver.vue";
 import { onMounted, ref } from "vue";
 import { useActivitiesStore } from "@stores";
 import { storeToRefs } from "pinia";
-import { CheckIcon, InboxIcon } from '@heroicons/vue/20/solid';
+import { CheckIcon, InboxIcon, ArrowPathIcon } from '@heroicons/vue/20/solid';
 import { DialogTitle } from "@headlessui/vue";
 import { XMarkIcon } from "@heroicons/vue/24/outline";
 
@@ -52,26 +52,7 @@ onMounted(() => {
       v-if="movingActivities.length"
       class="inline-flex gap-2 items-center"
     >
-      <svg
-        class="animate-spin h-5 w-5 text-white"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <circle
-          class="opacity-25"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          stroke-width="4"
-        />
-        <path
-          class="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        />
-      </svg>
+      <ArrowPathIcon class="animate-spin h-5 w-5 text-white" />
       Moving...
     </span>
 

diff --git a/resources/js/Components/Bucket/FileManager.vue b/resources/js/Components/Bucket/FileManager.vue
@@ -14,7 +14,8 @@ import FileUploadModal from "@components/Bucket/Modals/FileUploadModal.vue";
 import {
   CloudArrowUpIcon,
   HomeIcon,
-  FolderPlusIcon
+  FolderPlusIcon,
+  ArrowPathIcon
 } from "@heroicons/vue/20/solid/index.js";
 import NewFolderModal from "@components/Bucket/Modals/NewFolderModal.vue";
 
@@ -335,10 +336,20 @@ onMounted(() => {
   <portal to="fab">
     <!-- Menu -->
     <div
-      v-if="!hideMenu"
       class="flex gap-2 items-center divide-x"
     >
       <div
+        v-if="loading"
+        :class="['text-gray-700', 'px-3 py-2.5 leading-6 text-sm', 'cursor-pointer', 'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']"
+      >
+        <ArrowPathIcon
+          class="h-5 w-5 text-gray-700 animate-spin"
+          aria-hidden="true"
+        />
+      </div>
+
+      <div
+        v-if="!hideMenu"
         :class="['flex items-center', 'text-gray-700', 'px-3 py-2 leading-6 text-sm', 'cursor-pointer', 'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']"
         @click="openNewFolderModal = true"
       >
@@ -350,6 +361,7 @@ onMounted(() => {
       </div>
 
       <div
+        v-if="!hideMenu"
         :class="['flex items-center', 'text-gray-700', 'px-3 py-2 leading-6 text-sm', 'cursor-pointer', 'rounded-md bg-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50']"
         title="Upload"
         @click="openFileUploadModal = true"