disable resume previews to lower load on server, fixes #1954

This commit is contained in:
Amruth Pillai
2024-06-13 11:40:17 +02:00
parent 713ce91683
commit 767573ce6d
3 changed files with 8 additions and 68 deletions

View File

@ -1,6 +1,5 @@
import { t } from "@lingui/macro"; import { t } from "@lingui/macro";
import { import {
CircleNotch,
CopySimple, CopySimple,
FolderOpen, FolderOpen,
Lock, Lock,
@ -21,7 +20,6 @@ import dayjs from "dayjs";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useResumePreview } from "@/client/services/resume/preview";
import { useDialog } from "@/client/stores/dialog"; import { useDialog } from "@/client/stores/dialog";
import { BaseCard } from "./base-card"; import { BaseCard } from "./base-card";
@ -35,8 +33,6 @@ export const ResumeCard = ({ resume }: Props) => {
const { open } = useDialog<ResumeDto>("resume"); const { open } = useDialog<ResumeDto>("resume");
const { open: lockOpen } = useDialog<ResumeDto>("lock"); const { open: lockOpen } = useDialog<ResumeDto>("lock");
const { url, loading } = useResumePreview(resume.id);
const lastUpdated = dayjs().to(resume.updatedAt); const lastUpdated = dayjs().to(resume.updatedAt);
const onOpen = () => { const onOpen = () => {
@ -63,36 +59,6 @@ export const ResumeCard = ({ resume }: Props) => {
<ContextMenu> <ContextMenu>
<ContextMenuTrigger> <ContextMenuTrigger>
<BaseCard className="space-y-0" onClick={onOpen}> <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> <AnimatePresence>
{resume.locked && ( {resume.locked && (
<motion.div <motion.div

View File

@ -20,15 +20,10 @@ import {
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@reactive-resume/ui"; } from "@reactive-resume/ui";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { AnimatePresence, motion } from "framer-motion";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useResumePreview } from "@/client/services/resume/preview";
import { useDialog } from "@/client/stores/dialog"; import { useDialog } from "@/client/stores/dialog";
import { BaseListItem } from "./base-item"; import { BaseListItem } from "./base-item";
@ -42,8 +37,6 @@ export const ResumeListItem = ({ resume }: Props) => {
const { open } = useDialog<ResumeDto>("resume"); const { open } = useDialog<ResumeDto>("resume");
const { open: lockOpen } = useDialog<ResumeDto>("lock"); const { open: lockOpen } = useDialog<ResumeDto>("lock");
const { url } = useResumePreview(resume.id);
const lastUpdated = dayjs().to(resume.updatedAt); const lastUpdated = dayjs().to(resume.updatedAt);
const onOpen = () => { const onOpen = () => {
@ -140,32 +133,13 @@ export const ResumeListItem = ({ resume }: Props) => {
return ( return (
<ContextMenu> <ContextMenu>
<ContextMenuTrigger className="even:bg-secondary/20"> <ContextMenuTrigger className="even:bg-secondary/20">
<HoverCard> <BaseListItem
<HoverCardTrigger> className="group"
<BaseListItem title={resume.title}
className="group" description={t`Last updated ${lastUpdated}`}
title={resume.title} end={dropdownMenu}
description={t`Last updated ${lastUpdated}`} onClick={onOpen}
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>
</ContextMenuTrigger> </ContextMenuTrigger>
<ContextMenuContent> <ContextMenuContent>

View File

@ -1,7 +1,7 @@
{ {
"name": "@reactive-resume/source", "name": "@reactive-resume/source",
"description": "A free and open-source resume builder that simplifies the process of creating, updating, and sharing your resume.", "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", "license": "MIT",
"private": true, "private": true,
"author": { "author": {