Propagate learnings to Notifications page

src/pages/notifications.jsx

@@ -56,9 +56,11 @@ function Notifications() {
   const [showMore, setShowMore] = useState(false);
   const [onlyMentions, setOnlyMentions] = useState(false);
   const scrollableRef = useRef();
-  const { nearReachEnd, reachStart } = useScroll({
+  const { nearReachEnd, scrollDirection, reachStart, nearReachStart } =
+    useScroll({
       scrollableElement: scrollableRef.current,
     });
+  const hiddenUI = scrollDirection === 'end' && !nearReachStart;
 
   console.debug('RENDER Notifications');
 
@@ -142,6 +144,7 @@ function Notifications() {
     >
       <div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
         <header
+          hidden={hiddenUI}
           onClick={() => {
             scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
           }}
@@ -162,7 +165,6 @@ function Notifications() {
               <Loader hidden={uiState !== 'loading'} />
             </div>
           </div>
-        </header>
           {snapStates.notificationsShowNew && uiState !== 'loading' && (
             <button
               class="updates-button"
@@ -178,6 +180,7 @@ function Notifications() {
               <Icon icon="arrow-up" /> New notifications
             </button>
           )}
+        </header>
         <div id="mentions-option">
           <label>
             <input