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/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'
@@ -15,18 +15,21 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
   const intersectionObserverRef = useRef<HTMLDivElement>(null)
   const { notifyClientProxy } = useContext(W3iContext)
   const [state, dispatch] = useReducer(notificationsReducer, {})
+  const [isLoading, setIsLoading] = useState(false)
 
   const nextPageInternal = useCallback(
     async (lastMessageId?: string) => {
       if (!(notifyClientProxy && topic)) {
         return
       }
 
+      setIsLoading(true)
       const newNotifications = await notifyClientProxy.getNotificationHistory({
         topic,
         limit: NOTIFICATION_BATCH_SIZE,
         startingAfter: lastMessageId
       })
+      setIsLoading(false)
 
       dispatch({
         type: 'FETCH_NOTIFICATIONS',
@@ -89,6 +92,7 @@ export const useNotificationsInfiniteScroll = (topic?: string) => {
 
   return {
     hasMore,
+    isLoading,
     notifications: topicNotifications,
     intersectionObserverRef,
     nextPage: () => nextPageInternal(lastMessageId),