From 0e177fbafaa353632e5724e95588061444a1150f Mon Sep 17 00:00:00 2001
From: Biswajeet Das <biswajeetdas18@gmail.com>
Date: Wed, 7 Aug 2024 19:37:13 +0530
Subject: [PATCH] fix(js): show loading when changing filters (#6277)

---
 .../Notification/NotificationList.tsx         | 54 +++++++++----------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/packages/js/src/ui/components/Notification/NotificationList.tsx b/packages/js/src/ui/components/Notification/NotificationList.tsx
index 8c70a387510..ee39cfaaeb8 100644
--- a/packages/js/src/ui/components/Notification/NotificationList.tsx
+++ b/packages/js/src/ui/components/Notification/NotificationList.tsx
@@ -47,9 +47,10 @@ type NotificationListProps = {
   filter?: NotificationFilter;
 };
 
-const NotificationListWrapper = (props: NotificationListProps) => {
+/* This is also going to be exported as a separate component. Keep it pure. */
+export const NotificationList = (props: NotificationListProps) => {
   const options = createMemo(() => ({ ...props.filter, limit: props.limit }));
-  const { data, setEl, end, refetch } = useNotificationsInfiniteScroll({ options });
+  const { data, setEl, end, refetch, initialLoading } = useNotificationsInfiniteScroll({ options });
   const { count, reset: resetNewMessagesCount } = useNewMessagesCount({ filter: { tags: props.filter?.tags ?? [] } });
 
   const handleOnNewMessagesClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = async (e) => {
@@ -61,35 +62,28 @@ const NotificationListWrapper = (props: NotificationListProps) => {
   return (
     <>
       <NewMessagesCta count={count()} onClick={handleOnNewMessagesClick} />
-      <Show when={data().length > 0} fallback={<EmptyNotificationList />}>
-        <NotificationListContainer>
-          <For each={data()}>
-            {(notification) => (
-              <Notification
-                notification={notification}
-                mountNotification={props.mountNotification}
-                onNotificationClick={props.onNotificationClick}
-                onPrimaryActionClick={props.onPrimaryActionClick}
-                onSecondaryActionClick={props.onSecondaryActionClick}
-              />
-            )}
-          </For>
-          <Show when={!end()}>
-            <div ref={setEl}>
-              <For each={Array.from({ length: 3 })}>{() => <NotificationSkeleton />}</For>
-            </div>
-          </Show>
-        </NotificationListContainer>
+      <Show when={!initialLoading()} fallback={<NotificationListSkeleton count={8} />}>
+        <Show when={data().length > 0} fallback={<EmptyNotificationList />}>
+          <NotificationListContainer>
+            <For each={data()}>
+              {(notification) => (
+                <Notification
+                  notification={notification}
+                  mountNotification={props.mountNotification}
+                  onNotificationClick={props.onNotificationClick}
+                  onPrimaryActionClick={props.onPrimaryActionClick}
+                  onSecondaryActionClick={props.onSecondaryActionClick}
+                />
+              )}
+            </For>
+            <Show when={!end()}>
+              <div ref={setEl}>
+                <For each={Array.from({ length: 3 })}>{() => <NotificationSkeleton />}</For>
+              </div>
+            </Show>
+          </NotificationListContainer>
+        </Show>
       </Show>
     </>
   );
 };
-
-/* This is also going to be exported as a separate component. Keep it pure. */
-export const NotificationList = (props: NotificationListProps) => {
-  return (
-    <Suspense fallback={<NotificationListSkeleton count={8} />}>
-      <NotificationListWrapper {...props} />
-    </Suspense>
-  );
-};