web: fix unnecessary rerendering of notebook header

apps/web/src/components/list-container/index.tsx

@@ -170,10 +170,11 @@ function ListContainer(props: ListContainerProps) {
               components={{
                 Scroller: CustomScrollbarsVirtualList,
                 Item: VirtuosoItem,
-                Header: () => (header ? header : <Announcements />)
+                Header: ListHeader
               }}
               increaseViewportBy={{ top: 10, bottom: 10 }}
               context={{
+                header,
                 items,
                 group,
                 refresh,
@@ -221,6 +222,7 @@ function ListContainer(props: ListContainerProps) {
 export default ListContainer;
 
 type ListContext = {
+  header?: JSX.Element;
   items: VirtualizedGrouping<Item>;
   group: GroupingKey | undefined;
   refresh: () => void;
@@ -356,6 +358,10 @@ function VirtuosoItem({
   );
 }
 
+function ListHeader({ context }: { context?: ListContext }) {
+  return context?.header ? context.header : <Announcements />;
+}
+
 /**
  * Scroll the element at the specified index into view and
  * wait until it renders into the DOM. This function keeps