Fix logo flickering effect

web/src/app/chat/shared_chat_search/FixedLogo.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React, { memo } from "react";
 import { HeaderTitle } from "@/components/header/HeaderTitle";
 import { Logo } from "@/components/logo/Logo";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
@@ -11,7 +12,7 @@ import { LogoType } from "@/components/logo/Logo";
 import { EnterpriseSettings } from "@/app/admin/settings/interfaces";
 import { useRouter } from "next/navigation";
 
-export function LogoComponent({
+export const LogoComponent = memo(function LogoComponent({
   enterpriseSettings,
   backgroundToggled,
   show,
@@ -23,12 +24,13 @@ export function LogoComponent({
   isAdmin?: boolean;
 }) {
   const router = useRouter();
+
   return (
     <button
       onClick={isAdmin ? () => router.push("/chat") : () => {}}
-      className={`max-w-[200px] ${
-        !show && "mobile:hidden"
-      } flex items-center gap-x-1`}
+      className={`max-w-[200px]
+        ${!show && "mobile:hidden"}
+       flex items-center gap-x-1`}
     >
       {enterpriseSettings && enterpriseSettings.application_name ? (
         <>
@@ -40,7 +42,9 @@ export function LogoComponent({
               {enterpriseSettings.application_name}
             </HeaderTitle>
             {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
-              <p className="text-xs text-left text-subtle">Powered by Onyx</p>
+              <p className="text-xs text-left text-subtle whitespace-nowrap overflow-hidden text-ellipsis">
+                Powered by Onyx
+              </p>
             )}
           </div>
         </>
@@ -49,7 +53,7 @@ export function LogoComponent({
       )}
     </button>
   );
-}
+});
 
 export default function FixedLogo({
   backgroundToggled,

web/src/components/header/HeaderTitle.tsx

@@ -11,7 +11,9 @@ export function HeaderTitle({
 }) {
   const isString = typeof children === "string";
   const textSize =
-    isString && children.length > 10 ? "text-lg mb-[4px] " : "text-2xl";
+    isString && children.length > 10
+      ? "text-lg pb-[4px] "
+      : "pb-[2px] text-2xl";
 
   return (
     <h1

web/src/components/header/LogoWithText.tsx

@@ -40,7 +40,7 @@ export default function LogoWithText({
     <div
       className={`${
         hideOnMobile && "mobile:hidden"
-      } z-[100] ml-2 mt-1 h-8 mb-auto shrink-0 flex gap-x-0  items-center text-xl`}
+      } z-[100] ml-2 mt-1 h-8 mb-auto shrink-0 flex gap-x-0 items-center text-xl`}
     >
       {toggleSidebar && page == "chat" ? (
         <button
@@ -59,27 +59,29 @@ export default function LogoWithText({
 
           <FiSidebar
             size={20}
-            className={`text-text-mobile-sidebar ${toggled && "mobile:hidden"}`}
+            className={`text-text-mobile-sidebar desktop:hidden ${
+              toggled && "mobile:hidden"
+            }`}
           />
         </button>
       ) : (
         <div className="mr-1 invisible mb-auto h-6 w-6">
           <Logo height={24} width={24} />
-          lll
         </div>
       )}
 
-      <div
-        className={`${
-          showArrow ? "desktop:invisible" : "invisible"
-        } break-words inline-block w-fit text-text-700 text-xl`}
-      >
-        <LogoComponent
-          enterpriseSettings={enterpriseSettings!}
-          backgroundToggled={toggled}
-        />
-      </div>
-
+      {!toggled && (
+        <div
+          className={`${
+            showArrow ? "desktop:hidden" : "invisible"
+          } break-words inline-block w-fit text-text-700 text-xl`}
+        >
+          <LogoComponent
+            enterpriseSettings={enterpriseSettings!}
+            backgroundToggled={toggled}
+          />
+        </div>
+      )}
       {page == "chat" && !showArrow && (
         <TooltipProvider delayDuration={1000}>
           <Tooltip>
@@ -111,6 +113,7 @@ export default function LogoWithText({
           </Tooltip>
         </TooltipProvider>
       )}
+
       {showArrow && toggleSidebar && (
         <TooltipProvider delayDuration={0}>
           <Tooltip>

web/src/components/logo/Logo.tsx

@@ -48,12 +48,15 @@ export function Logo({
 export function LogoType() {
   return (
     <Image
+      priority
       className="max-h-8 w-full mr-auto "
       src="/logotype.png"
       alt="Logo"
       width={2640}
       height={733}
       style={{ objectFit: "contain", width: "100%", height: "100%" }}
+      loading="eager"
+      unoptimized={true}
     />
   );
 }