From d82133eea202de8aefd5aa501058b6ec3448496a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 21 Apr 2022 20:24:04 -0500
Subject: [PATCH] Notifications: refactor placeholders loading state

---
 app/soapbox/features/notifications/index.js | 30 +++++++++------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 2ed33a9c5..2ec4c652c 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -34,14 +34,6 @@ const Footer = ({ context }) => (
   ) : null
 );
 
-const EmptyPlaceholder = ({ context }) => {
-  if (context.isLoading) {
-    return <PlaceholderNotification />;
-  } else {
-    return <Text>{context.emptyMessage}</Text>;
-  }
-};
-
 const Item = ({ context, ...rest }) => (
   <div className='border-solid border-b border-gray-200 dark:border-gray-600' {...rest} />
 );
@@ -168,27 +160,29 @@ class Notifications extends React.PureComponent {
       <PullToRefresh onRefresh={this.handleRefresh}>
         <Virtuoso
           useWindowScroll
-          data={notifications.toArray()}
+          data={isLoading ? Array(20).fill() : notifications.toArray()}
           startReached={this.handleScrollToTop}
           endReached={this.handleLoadOlder}
           isScrolling={isScrolling => isScrolling && this.handleScroll}
           itemContent={(_index, notification) => (
-            <NotificationContainer
-              key={notification.id}
-              notification={notification}
-              onMoveUp={this.handleMoveUp}
-              onMoveDown={this.handleMoveDown}
-            />
+            isLoading ? (
+              <PlaceholderNotification />
+            ) : (
+              <NotificationContainer
+                key={notification.id}
+                notification={notification}
+                onMoveUp={this.handleMoveUp}
+                onMoveDown={this.handleMoveDown}
+              />
+            )
           )}
           context={{
             hasMore,
-            isLoading,
-            emptyMessage,
           }}
           components={{
             ScrollSeekPlaceholder: PlaceholderNotification,
             Footer,
-            EmptyPlaceholder,
+            EmptyPlaceholder: () => <Text>{emptyMessage}</Text>,
             Item,
           }}
         />