feat: Add empty state to notifications and remove no more data (#8277)

CLOSES CC-242
CLOSES CC-243
CLOSES CC-245

packages/admin-next/dashboard/src/components/common/infinite-list/infinite-list.tsx

@@ -1,15 +1,14 @@
 import { QueryKey, useInfiniteQuery } from "@tanstack/react-query"
 import { ReactNode, useEffect, useMemo, useRef } from "react"
-import { Skeleton } from "../skeleton"
 import { toast } from "@medusajs/ui"
 import { Spinner } from "@medusajs/icons"
-import { useTranslation } from "react-i18next"
 
 type InfiniteListProps<TResponse, TEntity, TParams> = {
   queryKey: QueryKey
   queryFn: (params: TParams) => Promise<TResponse>
   queryOptions?: { enabled?: boolean }
   renderItem: (item: TEntity) => ReactNode
+  renderEmpty: () => ReactNode
   responseKey: keyof TResponse
   pageSize?: number
 }
@@ -23,11 +22,10 @@ export const InfiniteList = <
   queryFn,
   queryOptions,
   renderItem,
+  renderEmpty,
   responseKey,
   pageSize = 20,
 }: InfiniteListProps<TResponse, TEntity, TParams>) => {
-  const { t } = useTranslation()
-
   const {
     data,
     error,
@@ -114,18 +112,22 @@ export const InfiniteList = <
   }, [error])
 
   if (isPending) {
-    return <Skeleton className="h-[148px] w-full rounded-lg" />
+    return (
+      <div className="flex h-full flex-col items-center justify-center">
+        <Spinner className="animate-spin" />
+      </div>
+    )
   }
 
   return (
-    <div ref={parentRef}>
-      {items &&
-        items.map((item) => <div key={item.id}>{renderItem(item)}</div>)}
+    <div ref={parentRef} className="h-full">
+      {items?.length
+        ? items.map((item) => <div key={item.id}>{renderItem(item)}</div>)
+        : renderEmpty()}
 
-      {(isFetching || !hasNextPage) && (
-        <div className="my-4 flex flex-col items-center justify-center">
-          {isFetching && <Spinner className="animate-spin" />}
-          {!hasNextPage && <p className="m-2">{t("general.noMoreData")}</p>}
+      {isFetching && (
+        <div className="flex flex-col items-center justify-center py-4">
+          <Spinner className="animate-spin" />
         </div>
       )}
     </div>

packages/admin-next/dashboard/src/components/layout/notifications/notifications.tsx

@@ -1,17 +1,18 @@
 import {
   ArrowDownTray,
   BellAlert,
+  BellAlertDone,
   InformationCircleSolid,
 } from "@medusajs/icons"
-import { Drawer, Heading, IconButton, Label, Text } from "@medusajs/ui"
+import { Drawer, Heading, IconButton, Text } from "@medusajs/ui"
 import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { HttpTypes } from "@medusajs/types"
 import { formatDistance } from "date-fns"
-import { Divider } from "../../common/divider"
 import { InfiniteList } from "../../common/infinite-list"
 import { sdk } from "../../../lib/client"
 import { notificationQueryKeys } from "../../../hooks/api"
+import { TFunction } from "i18next"
 
 interface NotificationData {
   title: string
@@ -70,6 +71,7 @@ export const Notifications = () => {
             queryKey={notificationQueryKeys.all}
             queryFn={(params) => sdk.admin.notification.list(params)}
             queryOptions={{ enabled: open }}
+            renderEmpty={() => <NotificationsEmptyState t={t} />}
             renderItem={(notification) => {
               return (
                 <Notification
@@ -157,3 +159,20 @@ const NotificationFile = ({ file }: { file: NotificationData["file"] }) => {
     </div>
   )
 }
+
+const NotificationsEmptyState = ({ t }: { t: TFunction }) => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <BellAlertDone />
+      <Text size="small" leading="compact" weight="plus" className="mt-3">
+        {t("notifications.emptyState.title")}
+      </Text>
+      <Text
+        size="small"
+        className="text-ui-fg-muted mt-1 max-w-[294px] text-center"
+      >
+        {t("notifications.emptyState.description")}
+      </Text>
+    </div>
+  )
+}