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 && }
>
);