From 767573ce6d520ee5e484859d390ced9646dd3e17 Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Thu, 13 Jun 2024 11:40:17 +0200
Subject: [PATCH] disable resume previews to lower load on server, fixes #1954

---
 .../_layouts/grid/_components/resume-card.tsx | 34 ----------------
 .../_layouts/list/_components/resume-item.tsx | 40 ++++---------------
 package.json                                  |  2 +-
 3 files changed, 8 insertions(+), 68 deletions(-)

diff --git a/apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx b/apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
index c34907f0..f1da2fd9 100644
--- a/apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
+++ b/apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
@@ -1,6 +1,5 @@
 import { t } from "@lingui/macro";
 import {
-  CircleNotch,
   CopySimple,
   FolderOpen,
   Lock,
@@ -21,7 +20,6 @@ import dayjs from "dayjs";
 import { AnimatePresence, motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 
-import { useResumePreview } from "@/client/services/resume/preview";
 import { useDialog } from "@/client/stores/dialog";
 
 import { BaseCard } from "./base-card";
@@ -35,8 +33,6 @@ export const ResumeCard = ({ resume }: Props) => {
   const { open } = useDialog<ResumeDto>("resume");
   const { open: lockOpen } = useDialog<ResumeDto>("lock");
 
-  const { url, loading } = useResumePreview(resume.id);
-
   const lastUpdated = dayjs().to(resume.updatedAt);
 
   const onOpen = () => {
@@ -63,36 +59,6 @@ export const ResumeCard = ({ resume }: Props) => {
     <ContextMenu>
       <ContextMenuTrigger>
         <BaseCard className="space-y-0" onClick={onOpen}>
-          <AnimatePresence presenceAffectsLayout>
-            {loading && (
-              <motion.div
-                layout
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-              >
-                <CircleNotch
-                  size={64}
-                  weight="thin"
-                  opacity={0.5}
-                  className="animate-spin self-center justify-self-center"
-                />
-              </motion.div>
-            )}
-
-            {!loading && url && (
-              <motion.img
-                layout
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                loading="lazy"
-                alt={resume.title}
-                className="size-full object-cover"
-                src={`${url}?cache=${Date.now()}`}
-              />
-            )}
-          </AnimatePresence>
-
           <AnimatePresence>
             {resume.locked && (
               <motion.div
diff --git a/apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx b/apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx
index a4ae48f3..0e72a738 100644
--- a/apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx
+++ b/apps/client/src/pages/dashboard/resumes/_layouts/list/_components/resume-item.tsx
@@ -20,15 +20,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
 } from "@reactive-resume/ui";
 import dayjs from "dayjs";
-import { AnimatePresence, motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 
-import { useResumePreview } from "@/client/services/resume/preview";
 import { useDialog } from "@/client/stores/dialog";
 
 import { BaseListItem } from "./base-item";
@@ -42,8 +37,6 @@ export const ResumeListItem = ({ resume }: Props) => {
   const { open } = useDialog<ResumeDto>("resume");
   const { open: lockOpen } = useDialog<ResumeDto>("lock");
 
-  const { url } = useResumePreview(resume.id);
-
   const lastUpdated = dayjs().to(resume.updatedAt);
 
   const onOpen = () => {
@@ -140,32 +133,13 @@ export const ResumeListItem = ({ resume }: Props) => {
   return (
     <ContextMenu>
       <ContextMenuTrigger className="even:bg-secondary/20">
-        <HoverCard>
-          <HoverCardTrigger>
-            <BaseListItem
-              className="group"
-              title={resume.title}
-              description={t`Last updated ${lastUpdated}`}
-              end={dropdownMenu}
-              onClick={onOpen}
-            />
-          </HoverCardTrigger>
-          <HoverCardContent align="end" className="p-0" sideOffset={-100} alignOffset={100}>
-            <AnimatePresence>
-              {url && (
-                <motion.img
-                  layout
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  loading="lazy"
-                  alt={resume.title}
-                  className="aspect-[1/1.4142] w-60 rounded-sm object-cover"
-                  src={`${url}?cache=${Date.now()}`}
-                />
-              )}
-            </AnimatePresence>
-          </HoverCardContent>
-        </HoverCard>
+        <BaseListItem
+          className="group"
+          title={resume.title}
+          description={t`Last updated ${lastUpdated}`}
+          end={dropdownMenu}
+          onClick={onOpen}
+        />
       </ContextMenuTrigger>
 
       <ContextMenuContent>
diff --git a/package.json b/package.json
index efe656c2..11add83e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@reactive-resume/source",
   "description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "license": "MIT",
   "private": true,
   "author": {