Don't use interval

web/components/notifications-icon.tsx

@@ -14,15 +14,13 @@ export default function NotificationsIcon(props: { className?: string }) {
   const privateUser = usePrivateUser(user?.id)
 
   useEffect(() => {
-    if (user) {
+    if (
-      const bonusChecker = setInterval(() => {
+      privateUser &&
-        requestBonuses({}).catch(console.log)
+      privateUser.lastTimeCheckedBonuses &&
-        return () => {
+      Date.now() - privateUser.lastTimeCheckedBonuses > 1000 * 70
-          clearInterval(bonusChecker)
+    )
-        }
+      requestBonuses({}).catch(console.log)
-      }, 1000 * 65)
+  }, [privateUser])
-    }
-  }, [user])
 
   return (
     <Row className={clsx('justify-center')}>

web/pages/notifications.tsx

@@ -102,9 +102,14 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
   if (!paginatedGroupedNotifications) return <LoadingIndicator />
 
   return (
-    <Col className={'min-h-screen'}>
+    <div className={'min-h-[100vh]'}>
-      {paginatedGroupedNotifications.length === 0 &&
+      {paginatedGroupedNotifications.length === 0 && (
-        "You don't have any notifications. Try changing your settings to see more."}
+        <div className={'mt-2'}>
+          You don't have any notifications. Try changing your settings to see
+          more.
+        </div>
+      )}
+
       {paginatedGroupedNotifications.map((notification) =>
         notification.type === 'income' ? (
           <IncomeNotificationGroupItem
@@ -168,7 +173,7 @@ function NotificationsList(props: { privateUser: PrivateUser }) {
             </div>
           </nav>
         )}
-    </Col>
+    </div>
   )
 }