fix(frontend): onboardind bug (#2414)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):

frontend/app/colors.css

@@ -32,6 +32,7 @@
   
     /* Gold */
     --gold: #b8860b;
+    --gold-lightest: #f0ebdd;;
   
     /* Error */
     --dangerous-dark: #e30c17;

frontend/app/search/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { usePathname } from "next/navigation";
-import { useEffect } from "react";
+import { useLayoutEffect, useState } from "react";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { AddBrainModal } from "@/lib/components/AddBrainModal";
@@ -20,6 +20,7 @@ import { ButtonType } from "@/lib/types/QuivrButton";
 import styles from "./page.module.scss";
 
 const Search = (): JSX.Element => {
+  const [isPageLoaded, setIsPageLoaded] = useState<boolean>(false);
   const pathname = usePathname();
   const { session } = useSupabase();
   const { isBrainCreationModalOpened, setIsBrainCreationModalOpened } =
@@ -27,9 +28,11 @@ const Search = (): JSX.Element => {
   const { userIdentityData } = useUserData();
   const { isDarkMode } = useUserSettingsContext();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (session === null) {
       redirectToLogin();
+    } else {
+      setTimeout(() => setIsPageLoaded(true), 1000);
     }
   }, [pathname, session]);
 
@@ -75,23 +78,27 @@ const Search = (): JSX.Element => {
         <AddBrainModal />
         <OnboardingModal />
       </div>
-      {!isBrainCreationModalOpened && !userIdentityData?.onboarded && (
-        <div className={styles.onboarding_overlay}>
-          <div className={styles.first_brain_button}>
-            <MessageInfoBox type="tutorial">
-              <span>Press the following button to create your first brain</span>
-            </MessageInfoBox>
-            <QuivrButton
-              iconName="brain"
-              label="Create Brain"
-              color="primary"
-              onClick={() => {
-                setIsBrainCreationModalOpened(true);
-              }}
-            />
+      {!isBrainCreationModalOpened &&
+        !userIdentityData?.onboarded &&
+        !!isPageLoaded && (
+          <div className={styles.onboarding_overlay}>
+            <div className={styles.first_brain_button}>
+              <MessageInfoBox type="tutorial">
+                <span>
+                  Press the following button to create your first brain
+                </span>
+              </MessageInfoBox>
+              <QuivrButton
+                iconName="brain"
+                label="Create Brain"
+                color="primary"
+                onClick={() => {
+                  setIsBrainCreationModalOpened(true);
+                }}
+              />
+            </div>
           </div>
-        </div>
-      )}
+        )}
     </>
   );
 };

frontend/lib/components/ui/MessageInfoBox/MessageInfoBox.module.scss

@@ -32,7 +32,7 @@
   &.tutorial {
     border-color: var(--gold);
     color: var(--gold);
-    background-color: var(--gold);
+    background-color: var(--gold-lightest);
   }
 
   &.dark {