From 28acd9720ef810b32380ab4ba2433044f4303d5b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 14 Jun 2023 21:42:28 +0800
Subject: [PATCH] Fade in the header banner too

Prevent the abruptness
---
 src/components/account-info.css | 5 +++++
 src/components/account-info.jsx | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index ad10b696..526059b1 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -38,6 +38,11 @@
   margin-bottom: -44px;
   user-select: none;
   -webkit-user-drag: none;
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+.account-container .header-banner.loaded {
+  opacity: 1;
 }
 .sheet .account-container .header-banner {
   border-top-left-radius: 16px;
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 1bbf00f7..91fd45af 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -186,6 +186,7 @@ function AccountInfo({
                 }}
                 crossOrigin="anonymous"
                 onLoad={(e) => {
+                  e.target.classList.add('loaded');
                   try {
                     // Get color from four corners of image
                     const canvas = document.createElement('canvas');