From 19e158683da114fdbfecc1775163b1ba3709a224 Mon Sep 17 00:00:00 2001
From: "MD. Ariful Alam" <swazan.arif@gmail.com>
Date: Fri, 27 Aug 2021 00:35:53 +0600
Subject: [PATCH] Fix flicking while loading

---
 src/components/AvatarCard.js | 58 ++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/AvatarCard.js b/src/components/AvatarCard.js
index d3a21a7..43cafb5 100644
--- a/src/components/AvatarCard.js
+++ b/src/components/AvatarCard.js
@@ -9,31 +9,39 @@ const AvatarCard = () => {
     return (
         <div className="card shadow-lg compact bg-base-100">
             <div className="grid place-items-center py-8">
-                <div className="avatar opacity-90 fade-in">
-                    <div className={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
-                        {
-                            loading ? (
-                                skeleton({
-                                    width: 'w-full',
-                                    height: 'h-full',
-                                    shape: '',
-                                })
-                            ) : (
-                                <LazyImage
-                                    src={profile.avatar ? profile.avatar : fallbackImage}
-                                    alt={profile.name}
-                                    placeholder={
-                                        skeleton({
-                                            width: 'w-full',
-                                            height: 'h-full',
-                                            shape: '',
-                                        })
-                                    }
-                                />
-                            )
-                        }
-                    </div>
-                </div>
+                {
+                    loading ? (
+                        <div className="avatar opacity-90">
+                            <div className="mb-8 rounded-full w-32 h-32">
+                                {
+                                    skeleton({
+                                        width: 'w-full',
+                                        height: 'h-full',
+                                        shape: '',
+                                    })
+                                }
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="avatar opacity-90">
+                            <div className="mb-8 rounded-full w-32 h-32 ring ring-primary ring-offset-base-100 ring-offset-2">
+                                {
+                                    <LazyImage
+                                        src={profile.avatar ? profile.avatar : fallbackImage}
+                                        alt={profile.name}
+                                        placeholder={
+                                            skeleton({
+                                                width: 'w-full',
+                                                height: 'h-full',
+                                                shape: '',
+                                            })
+                                        }
+                                    />
+                                }
+                            </div>
+                        </div>
+                    )
+                }
                 <div className="text-center mx-auto md:mx-8">
                     <h5 className="font-bold text-2xl">
                         {