Merge pull request #151 from ecency/feature/next-posts-placeholder

Fixed fallback preview of similar entry items

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/similar-entries/index.tsx

@@ -3,17 +3,12 @@
 import React from "react";
 
 import defaults from "@/defaults.json";
-import { catchPostImage, setProxyBase } from "@ecency/render-helper";
+import { setProxyBase } from "@ecency/render-helper";
 import "./_index.scss";
 import { Entry } from "@/entities";
 import i18next from "i18next";
-import { useGlobalStore } from "@/core/global-store";
-import { dateToFullRelative, makeEntryPath } from "@/utils";
-import Image from "next/image";
 import { getSimilarEntriesQuery } from "@/api/queries/get-similar-entries-query";
-import { useRouter } from "next/navigation";
-import { motion } from "framer-motion";
-import { EntryLink } from "@/features/shared";
+import { SimilarEntryItem } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/similar-entries/similar-entry-item";
 
 setProxyBase(defaults.imageServer);
 
@@ -22,9 +17,6 @@ interface Props {
 }
 
 export function SimilarEntries({ entry }: Props) {
-  const canUseWebp = useGlobalStore((s) => s.canUseWebp);
-
-  const router = useRouter();
   const { data: entries } = getSimilarEntriesQuery(entry).useClientQuery();
 
   return entries?.length === 3 ? (
@@ -33,38 +25,7 @@ export function SimilarEntries({ entry }: Props) {
         <div className="list-header-text">{i18next.t("similar-entries.title")}</div>
       </div>
       <div className="similar-entries-list-body grid grid-cols-1 sm:grid-cols-3 gap-4">
-        {entries?.map((en, i) => (
-          <EntryLink entry={en} key={i}>
-            <motion.div
-              className="similar-entries-list-item bg-gray-100 hover:bg-blue-dark-sky-040 dark:bg-gray-900 rounded-2xl overflow-hidden"
-              whileHover={{
-                rotate: 1.5
-              }}
-              initial={{
-                opacity: 0,
-                y: -24
-              }}
-              animate={{ opacity: 1, y: 0, transition: { delay: i * 0.2 } }}
-            >
-              <Image
-                src={
-                  (catchPostImage(en.img_url, 600, 500, canUseWebp ? "webp" : "match") ||
-                    "/assets/noimage.svg") ??
-                  "/assets/fallback.png"
-                }
-                alt={en.title}
-                width={1000}
-                height={1000}
-                className="object-cover w-full h-[8rem]"
-              />
-              <div className="truncate py-2 px-4">{en.title}</div>
-              <div className="item-footer py-2 px-4">
-                <span className="item-footer-author">{en.author}</span>
-                <span className="item-footer-date">{dateToFullRelative(en.created_at)}</span>
-              </div>
-            </motion.div>
-          </EntryLink>
-        ))}
+        {entries?.map((en, i) => <SimilarEntryItem entry={en} i={i} key={i} />)}
       </div>
     </div>
   ) : (

src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/similar-entries/similar-entry-item.tsx

@@ -0,0 +1,63 @@
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { catchPostImage } from "@ecency/render-helper";
+import { dateToFullRelative } from "@/utils";
+import { EntryLink } from "@/features/shared";
+import React, { useMemo } from "react";
+import { SearchResult } from "@/entities";
+import { useGlobalStore } from "@/core/global-store";
+
+interface Props {
+  entry: SearchResult;
+  i: number;
+}
+
+export function SimilarEntryItem({ entry, i }: Props) {
+  const canUseWebp = useGlobalStore((s) => s.canUseWebp);
+  const postImage = useMemo(
+    () => catchPostImage(entry.img_url, 600, 500, canUseWebp ? "webp" : "match"),
+    [canUseWebp, entry.img_url]
+  );
+
+  return (
+    <EntryLink entry={entry}>
+      <motion.div
+        className="similar-entries-list-item bg-gray-100 hover:bg-blue-dark-sky-040 dark:bg-gray-900 rounded-2xl overflow-hidden"
+        whileHover={{
+          rotate: 1.5
+        }}
+        initial={{
+          opacity: 0,
+          y: -24
+        }}
+        animate={{ opacity: 1, y: 0, transition: { delay: i * 0.2 } }}
+      >
+        {postImage && (
+          <Image
+            src={postImage}
+            alt={entry.title}
+            width={1000}
+            height={1000}
+            className="object-cover w-full h-[8rem]"
+          />
+        )}
+        {!postImage && (
+          <div className="w-full h-[8rem] flex items-center justify-center bg-gray-200 dark:bg-dark-default">
+            <Image
+              src="/assets/noimage.svg"
+              alt={entry.title}
+              width={1000}
+              height={1000}
+              className="w-8 h-8"
+            />
+          </div>
+        )}
+        <div className="truncate py-2 px-4">{entry.title}</div>
+        <div className="item-footer py-2 px-4">
+          <span className="item-footer-author">{entry.author}</span>
+          <span className="item-footer-date">{dateToFullRelative(entry.created_at)}</span>
+        </div>
+      </motion.div>
+    </EntryLink>
+  );
+}