From 13fb9473736386bfe64efdd3e4f71d01e59da05d Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Mon, 4 May 2026 07:38:10 +0200
Subject: [PATCH] refactor(ui): use new useClipboard with async

---
 app/composables/useClipboardAsync.ts | 41 ----------------------------
 app/pages/package/[[org]]/[name].vue | 25 +++++++++++------
 package.json                         |  2 +-
 pnpm-lock.yaml                       | 32 ++++++++++++++++++++--
 4 files changed, 47 insertions(+), 53 deletions(-)
 delete mode 100644 app/composables/useClipboardAsync.ts

diff --git a/app/composables/useClipboardAsync.ts b/app/composables/useClipboardAsync.ts
deleted file mode 100644
index 46fe4e5ba7..0000000000
--- a/app/composables/useClipboardAsync.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ShallowRef } from 'vue'
-
-type UseClipboardAsyncReturn = {
-  copy: () => void
-  copied: ShallowRef<boolean>
-}
-
-type UseClipboardAsyncOptions = {
-  copiedDuring: number
-}
-
-export function useClipboardAsync(
-  fn: () => Promise<string>,
-  options?: UseClipboardAsyncOptions,
-): UseClipboardAsyncReturn {
-  const copied = shallowRef(false)
-  const timeout = useTimeoutFn(() => (copied.value = false), options?.copiedDuring ?? 0, {
-    immediate: false,
-  })
-
-  async function copy() {
-    const asyncClipboard = new ClipboardItem({
-      'text/plain': fn().then(text => {
-        return new Blob([text], { type: 'text/plain' })
-      }),
-    })
-
-    try {
-      await navigator.clipboard.write([asyncClipboard])
-      copied.value = true
-      timeout.start()
-    } catch {
-      copied.value = false
-    }
-  }
-
-  return {
-    copy,
-    copied,
-  }
-}
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 934d81e471..1ba0190fc7 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -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
diff --git a/package.json b/package.json
index af817005e6..f0eb5e8d43 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7beb1ea7d1..e9fbf46dd8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -153,8 +153,8 @@ importers:
         specifier: 1.1.1
         version: 1.1.1(@vite-pwa/assets-generator@1.0.2)(magicast@0.5.2)(vite@8.0.0)(workbox-build@7.4.0)(workbox-window@7.4.0)
       '@vueuse/core':
-        specifier: 14.2.1
-        version: 14.2.1(vue@3.5.33)
+        specifier: 14.3.0
+        version: 14.3.0(vue@3.5.33)
       '@vueuse/integrations':
         specifier: 14.2.1
         version: 14.2.1(focus-trap@8.0.0)(fuse.js@7.1.0)(vue@3.5.33)
@@ -5837,6 +5837,11 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@vueuse/core@14.3.0':
+    resolution: {integrity: sha512-aHfz47g0ZhMtTVHmIzMVpJy8ePhhOy68GY5bv110+5DVtZ+W7BsOx+m61UNQqfrWyPztIHIanWa3E2tib3NFIw==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@vueuse/integrations@14.2.1':
     resolution: {integrity: sha512-2LIUpBi/67PoXJGqSDQUF0pgQWpNHh7beiA+KG2AbybcNm+pTGWT6oPGlBgUoDWmYwfeQqM/uzOHqcILpKL7nA==}
     peerDependencies:
@@ -5885,6 +5890,9 @@ packages:
   '@vueuse/metadata@14.2.1':
     resolution: {integrity: sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==}
 
+  '@vueuse/metadata@14.3.0':
+    resolution: {integrity: sha512-BwxmbAzwAVF50+MW57GXOUEV61nFBGnlBvrTqj49PqWJu3uw7hdu72ztXeZ33RdZtDY6kO+bfCAE1PCn88Tktw==}
+
   '@vueuse/nuxt@14.2.1':
     resolution: {integrity: sha512-DHgFMUpyH98M1YM9pbnRjFXMAMKEsHntJeOp8rOXs8QN2cvJBzEZ+TTWIBSPESNFOEwM02RA6BDsaTL35OK4Mw==}
     peerDependencies:
@@ -5905,6 +5913,11 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
+  '@vueuse/shared@14.3.0':
+    resolution: {integrity: sha512-bZpge9eSXwa4ToSiqJ7j6KRwhAsneMFoSz3LMWKQDkqimm3D/tbFlrklrs/IOqC8tEcYmXQZJ6N0UrjhBirVCg==}
+    peerDependencies:
+      vue: ^3.5.0
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -14007,7 +14020,7 @@ snapshots:
       '@nuxt/devtools-kit': 3.2.4(magicast@0.5.2)(vite@8.0.0)
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
       '@unhead/vue': 2.1.12(vue@3.5.33)
-      '@vueuse/core': 14.2.1(vue@3.5.33)
+      '@vueuse/core': 14.3.0(vue@3.5.33)
       '@vueuse/shared': 14.2.1(vue@3.5.33)
       consola: 3.4.2
       defu: 6.1.7
@@ -17117,6 +17130,13 @@ snapshots:
       '@vueuse/shared': 14.2.1(vue@3.5.33)
       vue: 3.5.33(typescript@6.0.2)
 
+  '@vueuse/core@14.3.0(vue@3.5.33)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.3.0
+      '@vueuse/shared': 14.3.0(vue@3.5.33)
+      vue: 3.5.33(typescript@6.0.2)
+
   '@vueuse/integrations@14.2.1(focus-trap@8.0.0)(fuse.js@7.1.0)(vue@3.5.33)':
     dependencies:
       '@vueuse/core': 14.2.1(vue@3.5.33)
@@ -17130,6 +17150,8 @@ snapshots:
 
   '@vueuse/metadata@14.2.1': {}
 
+  '@vueuse/metadata@14.3.0': {}
+
   '@vueuse/nuxt@14.2.1(magicast@0.5.2)(nuxt@4.4.2)(vue@3.5.33)':
     dependencies:
       '@nuxt/kit': 4.4.2(magicast@0.5.2)
@@ -17158,6 +17180,10 @@ snapshots:
     dependencies:
       vue: 3.5.33(typescript@6.0.2)
 
+  '@vueuse/shared@14.3.0(vue@3.5.33)':
+    dependencies:
+      vue: 3.5.33(typescript@6.0.2)
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2