add empty state for feed page

src/app/root.tsx

@@ -30,30 +30,33 @@ export function Root() {
   async function fetchNotes() {
     try {
       const follows = JSON.parse(account.follows);
-      let since: number;
 
-      if (totalNotes === 0 || lastLogin === 0) {
-        since = dateToUnix(getHourAgo(48, now.current));
-      } else {
-        since = lastLogin;
-      }
+      if (follows.length > 0) {
+        let since: number;
 
-      const filter: NDKFilter = {
-        kinds: [1, 6],
-        authors: follows,
-        since: since,
-      };
+        if (totalNotes === 0 || lastLogin === 0) {
+          since = dateToUnix(getHourAgo(48, now.current));
+        } else {
+          since = lastLogin;
+        }
 
-      const events = await prefetchEvents(ndk, filter);
-      for (const event of events) {
-        await createNote(
-          event.id,
-          event.pubkey,
-          event.kind,
-          event.tags,
-          event.content,
-          event.created_at
-        );
+        const filter: NDKFilter = {
+          kinds: [1, 6],
+          authors: follows,
+          since: since,
+        };
+
+        const events = await prefetchEvents(ndk, filter);
+        for (const event of events) {
+          await createNote(
+            event.id,
+            event.pubkey,
+            event.kind,
+            event.tags,
+            event.content,
+            event.created_at
+          );
+        }
       }
 
       return true;
@@ -69,6 +72,7 @@ export function Root() {
         authors: [account.pubkey],
         since: lastLogin,
       };
+
       const receiveFilter: NDKFilter = {
         kinds: [4],
         '#p': [account.pubkey],

src/app/space/components/blocks/feed.tsx

@@ -1,6 +1,7 @@
 import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 import { getNotesByAuthors, removeBlock } from '@libs/storage';
 
@@ -79,6 +80,16 @@ export function FeedBlock({ params }: { params: any }) {
               <NoteSkeleton />
             </div>
           </div>
+        ) : itemsVirtualizer.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-zinc-300">
+                  Not found any posts from last 48 hours
+                </p>
+              </div>
+            </div>
+          </div>
         ) : (
           <div
             className="relative w-full"

src/app/space/components/blocks/following.tsx

@@ -1,6 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useEffect, useRef } from 'react';
+import { Link } from 'react-router-dom';
 
 import { useNewsfeed } from '@app/space/hooks/useNewsfeed';
 
@@ -104,6 +105,24 @@ export function FollowingBlock() {
               <NoteSkeleton />
             </div>
           </div>
+        ) : itemsVirtualizer.length === 0 ? (
+          <div className="px-3 py-1.5">
+            <div className="rounded-xl border-t border-zinc-800/50 bg-zinc-900 px-3 py-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-center text-sm text-zinc-300">
+                  You not have any posts to see yet
+                  <br />
+                  Follow more people to have more fun.
+                </p>
+                <Link
+                  to="/app/trending"
+                  className="inline-flex w-max rounded bg-fuchsia-500 px-2.5 py-1.5 text-sm hover:bg-fuchsia-600"
+                >
+                  Trending
+                </Link>
+              </div>
+            </div>
+          </div>
         ) : (
           <div
             className="relative w-full"