diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css
index f124a0bb4..d882131cd 100644
--- a/web/navigation-panels/nav-state-info-bar.css
+++ b/web/navigation-panels/nav-state-info-bar.css
@@ -1,27 +1,39 @@
 div.topBarContainer {
   display: flex;
   background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
-  padding: 16px;
+  padding: 0 16px;
   color: var(--thread-top-bar-color);
-  border-bottom: 1px solid var(--border);
+  height: 56px;
 }
 
 div.topBarThreadInfo {
   height: 24px;
   display: flex;
   align-items: center;
   column-gap: 8px;
 }
 
 div.threadColorSquare {
   width: 24px;
   height: 24px;
   border-radius: 4px;
 }
 
 p.threadTitle {
   font-size: var(--m-font-16);
   font-weight: var(--bold);
 }
+
+div.hide {
+  height: 0px;
+  opacity: 0;
+  transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
+}
+
+div.show {
+  height: 56px;
+  opacity: 1;
+  transition: height 200ms ease-in-out, opacity 200ms ease-in-out;
+}
diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js
index 313795a19..731d3cafb 100644
--- a/web/navigation-panels/nav-state-info-bar.react.js
+++ b/web/navigation-panels/nav-state-info-bar.react.js
@@ -1,38 +1,78 @@
 // @flow
 
+import classnames from 'classnames';
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import ThreadAncestors from './chat-thread-ancestors.react.js';
 import css from './nav-state-info-bar.css';
 
 type NavStateInfoBarProps = {
   +threadInfo: ThreadInfo,
 };
 function NavStateInfoBar(props: NavStateInfoBarProps): React.Node {
   const { threadInfo } = props;
+
   const threadBackgroundColorStyle = React.useMemo(
     () => ({
       background: `#${threadInfo.color}`,
     }),
     [threadInfo.color],
   );
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
   return (
-    <div className={css.topBarContainer}>
+    <>
       <div className={css.topBarThreadInfo}>
         <div
           className={css.threadColorSquare}
           style={threadBackgroundColorStyle}
         />
         <p className={css.threadTitle}>{uiName}</p>
         <ThreadAncestors threadInfo={threadInfo} />
       </div>
-    </div>
+    </>
   );
 }
 
-export default NavStateInfoBar;
+type PossiblyEmptyNavStateInfoBarProps = {
+  +threadInfoInput: ?ThreadInfo,
+};
+function PossiblyEmptyNavStateInfoBar(
+  props: PossiblyEmptyNavStateInfoBarProps,
+): React.Node {
+  const { threadInfoInput } = props;
+
+  const [threadInfo, setThreadInfo] = React.useState(threadInfoInput);
+
+  React.useEffect(() => {
+    if (threadInfoInput !== threadInfo) {
+      if (threadInfoInput) {
+        setThreadInfo(threadInfoInput);
+      } else {
+        const timeout = setTimeout(() => {
+          setThreadInfo(null);
+        }, 200);
+        return () => clearTimeout(timeout);
+      }
+    }
+  }, [threadInfoInput, threadInfo]);
+
+  const content = React.useMemo(() => {
+    if (threadInfo) {
+      return <NavStateInfoBar threadInfo={threadInfo} />;
+    } else {
+      return null;
+    }
+  }, [threadInfo]);
+
+  const classes = classnames(css.topBarContainer, {
+    [css.hide]: !threadInfoInput,
+    [css.show]: threadInfoInput,
+  });
+  return <div className={classes}>{content}</div>;
+}
+
+export default PossiblyEmptyNavStateInfoBar;