Merge pull request #433 from WalletConnect/feat/add-skeleton-for-notifications-loading

feat: add skeleton for notifications loading

Author: enesozturk

src/components/notifications/AppNotifications/AppNotificationItemSkeleton.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react'
+
+import cn from 'classnames'
+import { LazyMotion, domMax } from 'framer-motion'
+
+import './AppNotifications.scss'
+
+const AppNotificationItemSkeleton = forwardRef<HTMLDivElement>(({}, ref) => {
+  return (
+    <LazyMotion features={domMax}>
+      <div className="AppNotifications__item-skeleton">
+        <div className="AppNotifications__item-skeleton__image" />
+        <div className="AppNotifications__item-skeleton__content" ref={ref}>
+          <div className="AppNotifications__item-skeleton__header">
+            <div className="AppNotifications__item-skeleton__header__title" />
+            <div className="AppNotifications__item-skeleton__header__date" />
+          </div>
+          <div className={cn('AppNotifications__item-skeleton__message')} />
+        </div>
+      </div>
+    </LazyMotion>
+  )
+})
+
+export default AppNotificationItemSkeleton

src/components/notifications/AppNotifications/AppNotifications.scss

@@ -265,4 +265,107 @@
       }
     }
   }
+
+  &__item-skeleton {
+    position: relative;
+    display: flex;
+    gap: 0.75rem;
+    width: 100%;
+    border: 1px solid var(--border-color-2);
+    align-items: center;
+    padding: 1rem 1.25rem;
+    border-radius: 0.75rem;
+    text-decoration: none;
+
+    @media only screen and (max-width: 768px) {
+      padding: 1rem 1.25rem;
+      border-radius: 0px;
+      border: none;
+      border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
+    }
+
+    &__status {
+      position: relative;
+      background-color: var(--shimmer-fg);
+    }
+
+    &__image {
+      width: 4em;
+      height: 4em;
+      aspect-ratio: 1/1;
+      border-radius: 10px;
+      object-fit: cover;
+      align-self: flex-start;
+      background-color: var(--shimmer-fg);
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+      @media only screen and (max-width: 768px) {
+        width: 48px;
+        height: 48px;
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      align-self: flex-start;
+      margin-top: 5px;
+      gap: 0.25rem;
+
+      @media only screen and (max-width: 768px) {
+        margin-top: 2px;
+      }
+    }
+
+    &__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &__title {
+        width: 50%;
+        height: 1.25rem;
+        background-color: var(--shimmer-fg);
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        border-radius: 0.25rem;
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+
+      &__date {
+        width: 10%;
+        height: 1.25rem;
+        background-color: var(--shimmer-fg);
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+    }
+
+    &__message {
+      width: 70%;
+      height: 1.25rem;
+      background-color: var(--shimmer-fg);
+      margin-top: 0.25rem;
+      border-radius: 0.25rem;
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+      @media only screen and (max-width: 768px) {
+        margin-top: 0px;
+      }
+    }
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
 }

src/components/notifications/AppNotifications/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useEffect, useRef, useState } from 'react'
+import { Fragment, createContext, useContext, useEffect, useRef, useState } from 'react'
 
 import { AnimatePresence } from 'framer-motion'
 import { motion } from 'framer-motion'
@@ -7,6 +7,7 @@ import { noop } from 'rxjs'
 
 import Label from '@/components/general/Label'
 import MobileHeader from '@/components/layout/MobileHeader'
+import AppNotificationItemSkeleton from '@/components/notifications/AppNotifications/AppNotificationItemSkeleton'
 import W3iContext from '@/contexts/W3iContext/context'
 import { useNotificationsInfiniteScroll } from '@/utils/hooks/useNotificationsInfiniteScroll'
 
@@ -36,7 +37,7 @@ const AppNotifications = () => {
   const { topic } = useParams<{ topic: string }>()
   const { activeSubscriptions, notifyClientProxy } = useContext(W3iContext)
   const app = activeSubscriptions.find(mock => mock.topic === topic)
-  const { notifications, intersectionObserverRef, nextPage, unshiftNewMessage } =
+  const { isLoading, notifications, intersectionObserverRef, nextPage, unshiftNewMessage } =
     useNotificationsInfiniteScroll(topic)
 
   const ref = useRef<HTMLDivElement>(null)
@@ -85,10 +86,10 @@ const AppNotifications = () => {
             title={app.metadata.name}
           />
           <AppNotificationsCardMobile />
-          {notifications.length > 0 ? (
+          {isLoading || notifications.length > 0 ? (
             <div className="AppNotifications__list">
               <div className="AppNotifications__list__content">
-                <Label color="main">Latest</Label>
+                {notifications.length > 0 ? <Label color="main">Latest</Label> : null}
                 {notifications.map((notification, index) => (
                   <AppNotificationItem
                     ref={index === notifications.length - 1 ? intersectionObserverRef : null}
@@ -109,6 +110,13 @@ const AppNotifications = () => {
                     appLogo={app.metadata?.icons?.[0]}
                   />
                 ))}
+                {isLoading ? (
+                  <Fragment>
+                    <AppNotificationItemSkeleton />
+                    <AppNotificationItemSkeleton />
+                    <AppNotificationItemSkeleton />
+                  </Fragment>
+                ) : null}
               </div>
             </div>
           ) : (

src/reducers/notifications.ts

@@ -4,6 +4,7 @@ export interface TopicNotificationsState {
   fullNotifications: NotifyClientTypes.NotifyNotification[]
   existingIds: Set<string>
   hasMore: boolean
+  isLoading: boolean
 }
 
 export interface NotificationsState {
@@ -12,11 +13,15 @@ export interface NotificationsState {
 
 export type NotificationsActions =
   | {
-      type: 'FETCH_NOTIFICATIONS'
+      type: 'FETCH_NOTIFICATIONS_DONE'
       notifications: NotifyClientTypes.NotifyNotification[]
       topic: string
       hasMore: boolean
     }
+  | {
+      type: 'FETCH_NOTIFICATIONS_LOADING'
+      topic: string
+    }
   | {
       type: 'UNSHIFT_NEW_NOTIFICATIONS'
       notifications: NotifyClientTypes.NotifyNotification[]
@@ -32,19 +37,42 @@ export const notificationsReducer = (
 ): NotificationsState => {
   const topicState = state[action.topic] as TopicNotificationsState | undefined
 
-  const ids = topicState?.existingIds || new Set<string>()
-  const filteredNotifications = action.notifications.filter(val => !ids.has(val.id))
-  const notificationIds = action.notifications.map(notification => notification.id)
+  function getTopicState(notifications: NotifyClientTypes.NotifyNotification[]) {
+    const ids = topicState?.existingIds || new Set<string>()
+    const filteredNotifications = notifications.filter(val => !ids.has(val.id))
+    const notificationIds = notifications.map(notification => notification.id)
 
-  const fullNotifications = topicState?.fullNotifications || []
-  const newFullIdsSet = new Set(topicState?.existingIds || [])
+    const fullNotifications = topicState?.fullNotifications || []
+    const newFullIdsSet = new Set(topicState?.existingIds || [])
 
-  for (const val of notificationIds) {
-    newFullIdsSet.add(val)
+    for (const val of notificationIds) {
+      newFullIdsSet.add(val)
+    }
+
+    return {
+      filteredNotifications,
+      fullNotifications,
+      newFullIdsSet
+    }
   }
 
   switch (action.type) {
-    case 'UNSHIFT_NEW_NOTIFICATIONS':
+    case 'FETCH_NOTIFICATIONS_LOADING': {
+      if (topicState) {
+        return {
+          ...state,
+          [action.topic]: {
+            ...topicState,
+            isLoading: true
+          }
+        }
+      }
+      return state
+    }
+    case 'UNSHIFT_NEW_NOTIFICATIONS': {
+      const { filteredNotifications, fullNotifications, newFullIdsSet } = getTopicState(
+        action.notifications
+      )
       const unshiftedNotifications = filteredNotifications.concat(fullNotifications)
 
       return {
@@ -53,11 +81,15 @@ export const notificationsReducer = (
           ...topicState,
           existingIds: newFullIdsSet,
           fullNotifications: unshiftedNotifications,
-          hasMore: topicState?.hasMore || false
+          hasMore: topicState?.hasMore || false,
+          isLoading: false
         }
       }
-
-    case 'FETCH_NOTIFICATIONS':
+    }
+    case 'FETCH_NOTIFICATIONS_DONE': {
+      const { filteredNotifications, fullNotifications, newFullIdsSet } = getTopicState(
+        action.notifications
+      )
       const concatenatedNotification = fullNotifications.concat(filteredNotifications)
 
       return {
@@ -66,8 +98,10 @@ export const notificationsReducer = (
           ...topicState,
           existingIds: newFullIdsSet,
           fullNotifications: concatenatedNotification,
-          hasMore: action.hasMore
+          hasMore: action.hasMore,
+          isLoading: false
         }
       }
+    }
   }
 }

src/utils/hooks/useNotificationsInfiniteScroll.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useReducer, useRef } from 'react'
+import { useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react'
 
 import W3iContext from '@/contexts/W3iContext/context'
 import { notificationsReducer } from '@/reducers/notifications'
@@ -22,14 +22,16 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
         return
       }
 
+      dispatch({ type: 'FETCH_NOTIFICATIONS_LOADING', topic })
+
       const newNotifications = await notifyClientProxy.getNotificationHistory({
         topic,
         limit: NOTIFICATION_BATCH_SIZE,
         startingAfter: lastMessageId
       })
 
       dispatch({
-        type: 'FETCH_NOTIFICATIONS',
+        type: 'FETCH_NOTIFICATIONS_DONE',
         notifications: newNotifications.notifications,
         hasMore: newNotifications.hasMore,
         topic
@@ -58,6 +60,7 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
 
   const topicState = topic ? state?.[topic] : undefined
   const topicNotifications = topicState ? topicState.fullNotifications : []
+  const isLoading = topicState ? topicState.isLoading : []
   const hasMore = topicState ? topicState.hasMore : false
 
   const lastMessageId = topicNotifications.length
@@ -89,6 +92,7 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
 
   return {
     hasMore,
+    isLoading,
     notifications: topicNotifications,
     intersectionObserverRef,
     nextPage: () => nextPageInternal(lastMessageId),