refactor(app): 129 grid psts

huilensolis · Mar 16, 2024 · 20232df · 20232df
1 parent 82ca299
commit 20232df
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
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/src/components/feature/posts-grid/posts-grid.component.tsx b/src/components/feature/posts-grid/posts-grid.component.tsx
@@ -168,9 +168,7 @@ export function PostsGrid({
             <div ref={lastItemRef} className="h-96 w-full" />
           </>
         )}
-        {(isFetching || isLoadingFirstTime) && (
-          <PostsGridSkeleton cuantity={32} />
-        )}
+        {isLoadingFirstTime && <PostsGridSkeleton cuantity={32} />}
       </PostsGridContainer>
     </>
   );