Merge pull request #280 from strideynet/kev-avatar-loading-animation

Add avatar loading animation
strideynet · Nov 19, 2024 · a3e2589 · a3e2589
2 parents 6222a0e + 3ccbdf2
commit a3e2589
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 41 deletions.
diff --git a/web/admin/assets/css/main.css b/web/admin/assets/css/main.css
@@ -7,3 +7,37 @@
     @apply text-gray-600 dark:text-gray-400;
   }
 }
+
+.loading-flash {
+  background: linear-gradient(
+    120deg,
+    transparent 5%,
+    rgb(31, 41, 55) 20%,
+    transparent 30%
+  );
+  background-size: 200% 100%;
+  background-position-y: bottom;
+  animation: 1.25s loading linear infinite;
+}
+
+@media (prefers-color-scheme: light) {
+  .loading-flash {
+    background: linear-gradient(
+      120deg,
+      transparent 5%,
+      rgb(243, 244, 246) 20%,
+      transparent 30%
+    );
+    background-size: 200% 100%;
+    background-position-y: bottom;
+  }
+}
+
+@keyframes loading {
+  from {
+    background-position-x: 50%;
+  }
+  to {
+    background-position-x: -150%;
+  }
+}
diff --git a/web/admin/components/shared/avatar.vue b/web/admin/components/shared/avatar.vue
@@ -7,26 +7,43 @@ const props = defineProps<{
   notRounded?: boolean;
 }>();
 
-const url = computed(() => {
-  let base = `https://bsky-cdn.codingpa.ws/avatar/${props.did}`;
+const loading = ref(true);
+const url = ref("");
 
+function updateUrl() {
+  loading.value = true;
+  const img = new Image();
+  let base = `https://bsky-cdn.codingpa.ws/avatar/${props.did}`;
   if (props.resize) {
     base += `/${props.resize}`;
   }
+  img.addEventListener("load", () => {
+    url.value = base;
+    loading.value = false;
+  });
+  img.src = base;
+}
+
+updateUrl();
 
-  return base;
-});
+watch(() => props.did, updateUrl);
 </script>
 
 <template>
   <img
-    v-if="did && hasAvatar"
+    v-if="did && hasAvatar && !loading"
+    ref="img"
     :class="{ 'rounded-full': !notRounded }"
     :src="url"
     :height="size"
     :width="size"
     alt=""
   />
+  <div
+    v-else-if="loading"
+    class="loading-flash"
+    :style="{ height: `${size}px`, width: `${size}px` }"
+  ></div>
   <svg
     v-else
     :width="size"

diff --git a/web/admin/components/user-card.vue b/web/admin/components/user-card.vue
@@ -72,7 +72,7 @@ await loadProfile();
       @next="next"
       @loading="loading = true"
     />
-    <div class="flex max-md:flex-col gap-3" :class="{ loading }">
+    <div class="flex max-md:flex-col gap-3" :class="{ 'loading-flash': loading }">
       <div class="mb-3 md:w-[50%] card-list h-min flex-1">
         <user-actions :did="data.did" :status="actor?.status" @update="next" />
         <shared-card v-if="data.banner">
@@ -185,7 +185,7 @@ await loadProfile();
         </shared-card>
       </div>
       <div class="mb-3 md:w-[50%]">
-        <shared-card :class="{ loading }" no-padding>
+        <shared-card :class="{ 'loading-flash': loading }" no-padding>
           <div class="px-4 py-3 border-b border-gray-300 dark:border-gray-700">
             <h2>Recent posts</h2>
           </div>
@@ -273,38 +273,4 @@ await loadProfile();
 .card-list > :not(:first-of-type) {
   @apply rounded-t-none;
 }
-
-.loading {
-  background: linear-gradient(
-    120deg,
-    transparent 5%,
-    rgb(31, 41, 55) 20%,
-    transparent 30%
-  );
-  background-size: 200% 100%;
-  background-position-y: bottom;
-  animation: 1.25s loading linear infinite;
-}
-
-@media (prefers-color-scheme: light) {
-  .loading {
-    background: linear-gradient(
-      120deg,
-      transparent 5%,
-      rgb(243, 244, 246) 20%,
-      transparent 30%
-    );
-    background-size: 200% 100%;
-    background-position-y: bottom;
-  }
-}
-
-@keyframes loading {
-  from {
-    background-position-x: 50%;
-  }
-  to {
-    background-position-x: -150%;
-  }
-}
 </style>