Merge pull request #130 from Huilensolis/129-fix-pots-grid-skeleton

129 fix pots grid skeleton
huilensolis · Mar 16, 2024 · 6c74462 · 6c74462
2 parents 3edd25f + 20232df
commit 6c74462
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 40 deletions.
diff --git 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 (
-    <main className="w-full h-full flex flex-col gap-2">
-      <PostsGrid onFetchNewPosts={fetchNewPosts} />
-    </main>
-  );
+  return <PostsGrid onFetchNewPosts={fetchNewPosts} />;
 }
diff --git a/src/app/(site)/app/page.tsx b/src/app/(site)/app/page.tsx
@@ -7,28 +7,7 @@ export default function AppPage() {
   protectRouteFromUnauthUsers();
   return (
     <div className="w-full h-full flex min-h-screen">
-      <div className="md:grid hidden w-full h-full min-h-screen">
-        <DesktopLayout />
-      </div>
-      <div className="md:hidden grid min-h-screen w-full h-full">
-        <MobileLayout />
-      </div>
-    </div>
-  );
-}
-
-function DesktopLayout() {
-  return (
-    <main className="w-full h-full flex flex-col justify-start">
       <Feed />
-    </main>
-  );
-}
-
-function MobileLayout() {
-  return (
-    <main className="w-full h-full py-2">
-      <Feed />
-    </main>
+    </div>
   );
 }
diff --git 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<HTMLImageElement>(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 (
-    <div className={`relative ${containerClassname}`}>
+    <div className={containerClassname}>
       <div className="relative">
         {!error && (
           <img

diff --git a/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx b/src/components/feature/posts-grid/components/posts-grid-row/posts-grid-row.component.tsx
@@ -15,7 +15,7 @@ export function PostsGridRow({
   const imageHeight = (post.asset_height * columnWidth) / post.asset_width;
   return (
     <li
-      className={`flex w-full mb-2`}
+      className="flex w-full mb-2"
       style={{ width: columnWidth, height: imageHeight }}
     >
       <Link

diff --git a/...nents/feature/posts-grid/components/posts-grid-skeleton/posts-grid-skeleton.component.tsx b/...nents/feature/posts-grid/components/posts-grid-skeleton/posts-grid-skeleton.component.tsx
@@ -6,7 +6,7 @@ export function PostsGridSkeleton({ cuantity = 16 }: { cuantity?: number }) {
       {Array(cuantity)
         .fill(" ")
         .map((_, i) => (
-          <Skeleton key={i} className={`w-full h-96 mb-2 rounded-sm`} />
+          <Skeleton key={i} className={`w-full h-96 mb-2 rounded-md`} />
         ))}
     </>
   );

diff --git 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<boolean>(false);
 
   const [isFetching, setIsFetching] = useState<boolean>(false);
+  const [isLoadingFirstTime, setIsLoadingFirstTime] = useState<boolean>(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 (
     <>
       <PostsGridContainer ref={setContainerRef}>
-        {posts.length > 0 && columnWidth && (
+        {!isLoadingFirstTime && posts.length > 0 && columnWidth && (
           <>
             {posts.map((post, i) => (
               <PostsGridRow
@@ -165,6 +168,7 @@ export function PostsGrid({
             <div ref={lastItemRef} className="h-96 w-full" />
           </>
         )}
+        {isLoadingFirstTime && <PostsGridSkeleton cuantity={32} />}
       </PostsGridContainer>
     </>
   );