diff --git a/src/app/(site)/app/components/feed/index.tsx b/src/app/(site)/app/components/feed/index.tsx index f65b5d3..f67e4b3 100644 --- a/src/app/(site)/app/components/feed/index.tsx +++ b/src/app/(site)/app/components/feed/index.tsx @@ -1,4 +1,5 @@ "use client"; + import { useSupabase } from "@/hooks/use-supabase"; import { PostsGrid } from "@/components/feature/posts-grid/posts-grid.component"; @@ -21,9 +22,5 @@ export function Feed() { .abortSignal(signal); } - return ( -
- -
- ); + return ; } diff --git a/src/app/(site)/app/page.tsx b/src/app/(site)/app/page.tsx index 62d58b4..fa487d8 100644 --- a/src/app/(site)/app/page.tsx +++ b/src/app/(site)/app/page.tsx @@ -7,28 +7,7 @@ export default function AppPage() { protectRouteFromUnauthUsers(); return (
-
- -
-
- -
-
- ); -} - -function DesktopLayout() { - return ( -
-
- ); -} - -function MobileLayout() { - return ( -
- -
+ ); } diff --git a/src/components/feature/lazy-image/index.tsx b/src/components/feature/lazy-image/index.tsx index 273aaec..cbbb929 100644 --- a/src/components/feature/lazy-image/index.tsx +++ b/src/components/feature/lazy-image/index.tsx @@ -2,7 +2,13 @@ import { Skeleton } from "@/components/ui/skeleton"; import { ImageOff } from "lucide-react"; -import { type HTMLAttributes, useEffect, useRef, useState } from "react"; +import { + type HTMLAttributes, + useEffect, + useRef, + useState, + useCallback, +} from "react"; type TProps = { src: string; @@ -38,19 +44,16 @@ export function LazyImage({ setError(true); }; - const imageRef = useRef(null); + const imageRef = useCallback((node: HTMLImageElement) => { + if (!node) return; + if (node.complete) handleImageLoad(); - useEffect(() => { - if (!imageRef.current) return; - - if (imageRef.current.complete) handleImageLoad(); - - imageRef.current.onload = handleImageLoad; - imageRef.current.onerror = handleImageError; + node.onload = handleImageLoad; + node.onerror = handleImageError; }, []); return ( -
+
{!error && ( ( - + ))} ); diff --git a/src/components/feature/posts-grid/posts-grid.component.tsx b/src/components/feature/posts-grid/posts-grid.component.tsx index ce17e76..c7402c7 100644 --- a/src/components/feature/posts-grid/posts-grid.component.tsx +++ b/src/components/feature/posts-grid/posts-grid.component.tsx @@ -3,6 +3,7 @@ import { PostsGridRow } from "./components/posts-grid-row"; import { PostsGridContainer } from "./components/posts-grid-container"; import { type Database } from "@/supabase/types"; import { type PostgrestSingleResponse } from "@supabase/supabase-js"; +import { PostsGridSkeleton } from "./components/posts-grid-skeleton"; type TPost = Database["public"]["Tables"]["posts"]["Row"]; @@ -97,6 +98,7 @@ export function PostsGrid({ const [isLastPage, setIsLastPage] = useState(false); const [isFetching, setIsFetching] = useState(false); + const [isLoadingFirstTime, setIsLoadingFirstTime] = useState(true); function handleScroll() { setPage((prev) => prev + 32); @@ -131,6 +133,7 @@ export function PostsGrid({ } setPosts((prev) => [...prev, ...newPosts]); + setIsLoadingFirstTime(false); } catch (error) { console.log(error); } finally { @@ -151,7 +154,7 @@ export function PostsGrid({ return ( <> - {posts.length > 0 && columnWidth && ( + {!isLoadingFirstTime && posts.length > 0 && columnWidth && ( <> {posts.map((post, i) => ( )} + {isLoadingFirstTime && } );