From cb6d2b9d86f7b150271814e02ebe4cc11c82ea3a Mon Sep 17 00:00:00 2001
From: Florian Dejonckheere <florian@floriandejonckheere.be>
Date: Sun, 10 Dec 2023 15:14:20 +0100
Subject: [PATCH] Hide username and alert popover when loading

---
 src/layouts/navigation.tsx | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/layouts/navigation.tsx b/src/layouts/navigation.tsx
index f79e5b9..5af73da 100644
--- a/src/layouts/navigation.tsx
+++ b/src/layouts/navigation.tsx
@@ -37,22 +37,24 @@ export default function Navigation(): ReactElement {
             className="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow sm:block"
           >
             <div className="flex flex-col gap-10 mt-5 sm:flex-row sm:items-center sm:justify-end sm:mt-0 sm:ps-5">
-              <EnergyAlertsPopover />
               {isSuccess && (
-                <Link
-                  to="/settings"
-                  className="flex items-center justify-between gap-4 font-medium text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-100"
-                >
-                  <span className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-800 font-semibold text-white leading-none dark:bg-slate-200 dark:text-gray-800">
-                    {data.username.charAt(0).toUpperCase()}
-                  </span>
-                  <div className="flex flex-col">
-                    <span>{data.username}</span>
-                    <span className="text-gray-400 dark:text-slate-500">
-                      {data.email}
+                <>
+                  <EnergyAlertsPopover />
+                  <Link
+                    to="/settings"
+                    className="flex items-center justify-between gap-4 font-medium text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-100"
+                  >
+                    <span className="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-800 font-semibold text-white leading-none dark:bg-slate-200 dark:text-gray-800">
+                      {data.username.charAt(0).toUpperCase()}
                     </span>
-                  </div>
-                </Link>
+                    <div className="flex flex-col">
+                      <span>{data.username}</span>
+                      <span className="text-gray-400 dark:text-slate-500">
+                        {data.email}
+                      </span>
+                    </div>
+                  </Link>
+                </>
               )}
               <DarkModeToggle />
               <a