From 702a9535e87b29e40e94ef5352b35ec5c6cd6d8f Mon Sep 17 00:00:00 2001
From: Palak <Palakgoyal0304@gmail.com>
Date: Sat, 5 Aug 2023 23:21:57 +0530
Subject: [PATCH 1/2] Add blur effect while background image is loading

---
 src/pages/Profile/index.css | 10 ++++++++++
 src/pages/Profile/index.jsx |  5 ++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/pages/Profile/index.css b/src/pages/Profile/index.css
index 35ce71655..3a8591a35 100644
--- a/src/pages/Profile/index.css
+++ b/src/pages/Profile/index.css
@@ -21,6 +21,16 @@
   margin: auto;
 }
 
+.blur-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
 .feed_btn_container {
   margin-left: 17vw;
   display: flex;
diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx
index 6f3929f10..7d635bf9e 100644
--- a/src/pages/Profile/index.jsx
+++ b/src/pages/Profile/index.jsx
@@ -53,6 +53,7 @@ function Profile() {
   const [bgimgurl, setBgimgurl] = useState(null);
   const [backgroundImage, setBackgroundImage] = useState(null);
   const [showSaved, setShowSaved] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   const bgRef = useRef(null);
 
@@ -398,10 +399,12 @@ function Profile() {
               style={{ position: "relative" }}
             >
               <div className="background-image-sub-container">
+              {imageLoaded ? null : <div className="blur-effect" />}
                 <img
                   ref={bgRef}
                   src={bgImageUrl || profileBackgroundImg}
-                  alt=""
+                  alt={name}
+                  onLoad={() => setImageLoaded(true)}
                   className="background-image"
                 />
               </div>

From 0f0b452dc6aeb2774f5bd7e8389ac460c505b6bc Mon Sep 17 00:00:00 2001
From: narayan soni <narayansoni854@gmail.com>
Date: Sun, 6 Aug 2023 01:48:27 +0530
Subject: [PATCH 2/2] refactor: shortcircuit

---
 src/pages/Profile/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Profile/index.jsx b/src/pages/Profile/index.jsx
index 45bda3e39..5fde4ed1d 100644
--- a/src/pages/Profile/index.jsx
+++ b/src/pages/Profile/index.jsx
@@ -408,7 +408,7 @@ function Profile() {
               style={{ position: "relative" }}
             >
               <div className="background-image-sub-container">
-              {imageLoaded ? null : <div className="blur-effect" />}
+                {!imageLoaded && <div className="blur-effect" />}
                 <img
                   ref={bgRef}
                   src={