From e6f678eacd2c34d0ae627159f7286323ab7ade5e Mon Sep 17 00:00:00 2001
From: Yang Wei Hao <whyang0808@gmail.com>
Date: Sun, 9 Oct 2022 18:12:30 +0800
Subject: [PATCH] Add loading indicator for Download Resume button

---
 src/components/avatar-card/index.jsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/avatar-card/index.jsx b/src/components/avatar-card/index.jsx
index 525c8dd..19c8e23 100644
--- a/src/components/avatar-card/index.jsx
+++ b/src/components/avatar-card/index.jsx
@@ -55,17 +55,22 @@ const AvatarCard = ({ profile, loading, avatarRing, resume }) => {
               : profile.bio}
           </div>
         </div>
-        {resume?.fileUrl && (
-          <a
-            href={resume.fileUrl}
-            target="_blank"
-            className="btn btn-outline btn-primary text-xs mt-6"
-            download
-            rel="noreferrer"
-          >
-            Download Resume
-          </a>
-        )}
+        {resume?.fileUrl &&
+          (loading ? (
+            <div className="mt-3">
+              {skeleton({ width: 'w-48', height: 'h-5' })}
+            </div>
+          ) : (
+            <a
+              href={resume.fileUrl}
+              target="_blank"
+              className="btn btn-outline btn-primary text-xs mt-6"
+              download
+              rel="noreferrer"
+            >
+              Download Resume
+            </a>
+          ))}
       </div>
     </div>
   );