big logo nice on reconnect

packages/desktop/package.json

@@ -99,6 +99,7 @@
   "dependencies": {
     "@getstation/electron-google-oauth2": "^2.1.0",
     "@nirvana/core": "*",
+    "@nirvana/components": "*",
     "antd": "^4.20.2",
     "axios": "^0.26.1",
     "electron-squirrel-startup": "^1.0.0",

packages/desktop/src/components/header/index.tsx

@@ -10,7 +10,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 
 import { FaSearch } from "react-icons/fa";
+import HorizontalLogo from "../../../../components/logo/horizontal";
 import Logo from "../Logo";
+import { LogoType } from "../../../../components/logo/full";
 import { useGetUserDetails } from "../../controller/index";
 
 /**
@@ -127,11 +129,15 @@ export default function NirvanaHeader({
         className="flex flex-row items-center bg-gray-100 p-4 border-b border-b-gray-200"
         id="titlebar"
       >
-        <Tooltip title="connected" placement="right">
+        {desktopMode === "flowState" ? (
-          <div onClick={onHeaderFocus} className="animate-pulse">
+          <HorizontalLogo type={LogoType.small} />
-            <Logo type="small" grayscale={desktopMode === "flowState"} />
+        ) : (
-          </div>
+          <Tooltip title={"connected"} placement="right">
-        </Tooltip>
+            <div onClick={onHeaderFocus}>
+              <Logo type="small" />
+            </div>
+          </Tooltip>
+        )}
 
         {!shouldHideSearch && (
           <div className="mx-auto flex flex-row items-center space-x-2">