refactor(ui): use new useClipboard with async (#2675)

Co-authored-by: Willow (GHOST) <[email protected]>

Author: MatteoGabriele

app/composables/useClipboardAsync.ts

@@ -108,15 +108,20 @@ const {
 )
 
 //copy README file as Markdown
-const { copied: copiedReadme, copy: copyReadme } = useClipboardAsync(
-  async () => {
+const {
+  copied: copiedReadme,
+  copy,
+  copyPending: copyReadmePending,
+} = useClipboard({
+  copiedDuring: 2000,
+})
+
+function copyReadme() {
+  copy(async () => {
     await fetchReadmeMarkdown()
     return readmeMarkdownData.value?.markdown ?? ''
-  },
-  {
-    copiedDuring: 2000,
-  },
-)
+  })
+}
 
 function prefetchReadmeMarkdown() {
   if (readmeMarkdownStatus.value === 'idle') {
@@ -1040,7 +1045,11 @@ const showSkeleton = shallowRef(false)
                   "
                   :classicon="copiedReadme ? 'i-lucide:check' : 'i-simple-icons:markdown'"
                 >
-                  {{ copiedReadme ? $t('common.copied') : $t('common.copy') }}
+                  <span>{{ copiedReadme ? $t('common.copied') : $t('common.copy') }}</span>
+                  <span
+                    v-if="copyReadmePending"
+                    class="i-lucide:loader-circle animate-spin size-4"
+                  ></span>
                 </ButtonBase>
               </TooltipApp>
               <ReadmeTocDropdown

app/pages/package/[[org]]/[name].vue

@@ -77,7 +77,7 @@
     "@vercel/speed-insights": "2.0.0",
     "@vite-pwa/assets-generator": "1.0.2",
     "@vite-pwa/nuxt": "1.1.1",
-    "@vueuse/core": "14.2.1",
+    "@vueuse/core": "14.3.0",
     "@vueuse/integrations": "14.2.1",
     "@vueuse/nuxt": "14.2.1",
     "@vueuse/router": "^14.2.1",