summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-10-04 12:00:36 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-10-04 12:00:36 +0200
commitfed3772dfd88667ed91a86f51f90d4dd1413c676 (patch)
treebce3329b72c66bfb87083e8bb2182c91ad97eff5
parentefcd1ff3cc277c440d3c6523637d07dfd919ffda (diff)
Add loading on like request
-rw-r--r--pages/models/_id/index.vue8
1 files changed, 7 insertions, 1 deletions
diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue
index abc9a34..a353170 100644
--- a/pages/models/_id/index.vue
+++ b/pages/models/_id/index.vue
@@ -87,9 +87,15 @@
.mb-5.text-right
button.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-white.py-2.px-4.mr-2.text-sm.font-medium.text-black.shadow-sm(
- class="hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2"
+ class="hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2"
@click="toggleLike"
+ :disabled="isLoading"
+ :readonly="isLoading"
)
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" v-if="isLoading">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <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"></path>
+ </svg>
svg(v-if="!likedByUser()" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mr-1")
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
svg(v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 mr-1")