feat: Use CSS contain to avoid computations (#3158)

1 files changed, 5 insertions, 1 deletions

diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index ff06a2954..ea4d9086b 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -100,7 +100,9 @@ class Notifications extends React.PureComponent {
       unread = <div className='notifications__unread-indicator' />;
     }
 
-    if (isLoading || notifications.size > 0) {
+    if (isLoading && this.scrollableArea) {
+      scrollableArea = this.scrollableArea;
+    } else if (notifications.size > 0) {
       scrollableArea = (
         <div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
           {unread}
@@ -119,6 +121,8 @@ class Notifications extends React.PureComponent {
       );
     }
 
+    this.scrollableArea = scrollableArea;
+
     return (
       <Column icon='bell' active={isUnread} heading={intl.formatMessage(messages.title)}>
         <ColumnSettingsContainer />