reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add empty state for feed page

Browse Source
This commit is contained in:
Ren Amamiya
2023-07-10 08:40:12 +07:00
parent 8d29e521cc
commit df409afeed
3 changed files with 55 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/space/components/blocks/feed.tsx
View File

@@ -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"

19
src/app/space/components/blocks/following.tsx
View File

@@ -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"