Skip to content

fix: use img instead of next's Image for less memory leaks #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: use img instead of next's Image for less memory leaks #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
afacfd3
fix: use img instead of next's Image for less memory leaks
bassgeta Sep 25, 2025
16632f6
fix: remove unused imports
bassgeta Sep 25, 2025
10190ab
fix: add lazy loading on the carousel
bassgeta Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions src/app/(demo)/event/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { notFound } from "next/navigation";
import Image from "next/image";
import { CalendarIcon, MapPinIcon, Clock } from "lucide-react";
import { format } from "date-fns";
import { TicketSelector } from "@/components/TicketSelector";
Expand All @@ -26,13 +25,11 @@ export default async function EventDetailsPage({
return (
<div className="min-h-screen bg-gray-50">
{/* Hero Section */}
<div className="relative h-[400px] w-full">
<Image
<div className="relative h-[400px] w-full overflow-hidden">
<img
src={event.headerImage}
alt={event.name}
fill
className="object-cover"
priority
className="object-cover w-full"
/>
<div className="absolute inset-0 bg-black/50" />
<div className="absolute bottom-8 left-8">
Expand Down Expand Up @@ -86,10 +83,9 @@ export default async function EventDetailsPage({
<h2 className="text-2xl font-semibold mb-4">Organizer</h2>
<div className="flex items-center gap-4">
<div className="relative h-16 w-16 rounded-full overflow-hidden">
<Image
<img
src={event.organizer.logo}
alt={event.organizer.name}
fill
className="object-cover"
/>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/app/(demo)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
CarouselItem,
} from "@/components/ui/carousel";
import eventData from "@/const/data.json";
import Image from "next/image";
import Link from "next/link";

export const metadata = {
Expand Down Expand Up @@ -36,10 +35,9 @@ export default function DemoPage() {
aria-label={`View details for ${event.name}`}
>
<div className="relative aspect-[3/1] w-full overflow-hidden rounded-lg">
<Image
<img
src={event.headerImage}
alt={event.name}
fill
className="object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
Expand Down
6 changes: 3 additions & 3 deletions src/components/EventShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { CalendarIcon, MapPinIcon } from "lucide-react";
import { format } from "date-fns";
Expand Down Expand Up @@ -69,11 +68,12 @@ export const EventShowcase = ({ events }: EventShowcaseProps) => {
aria-label={`View details for ${event.name} on ${format(new Date(event.dateTime), "MMM d, yyyy")}`}
>
<div className="relative aspect-[16/9] overflow-hidden rounded-t-xl">
<Image
<img
src={event.image}
alt={event.name}
fill
className="object-cover transition-transform duration-300 group-hover:scale-105"
loading="lazy"
decoding="async"
/>
<div className="absolute top-4 left-4">
<span className="rounded-full bg-[#099C77] px-3 py-1 text-sm font-medium text-white shadow-sm">
Expand Down
3 changes: 1 addition & 2 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button } from "./ui/button";
Expand Down Expand Up @@ -89,7 +88,7 @@ export const Navbar = () => {
<nav className="w-full flex items-center py-4 border-b-[1px]">
<div className="flex px-5 items-center justify-between max-w-[1200px] w-full mx-auto">
<div className="flex items-center space-x-4">
<Image
<img
src="/logo.svg"
alt="Request Network"
width={100}
Expand Down
60 changes: 30 additions & 30 deletions src/const/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
"name": "Future of Tech Summit 2024",
"type": "Conference",
"featured": true,
"image": "https://images.unsplash.com/photo-1540575467063-178a50c2df87",
"headerImage": "https://images.unsplash.com/photo-1515187029135-18ee286d815b",
"image": "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1515187029135-18ee286d815b?w=1200&q=80&auto=format",
"dateTime": "2024-09-15T09:00:00",
"endDateTime": "2024-09-16T18:00:00",
"location": {
Expand All @@ -22,7 +22,7 @@
"startingPrice": 299,
"organizer": {
"name": "TechEvents Global",
"logo": "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9",
"logo": "https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=100&q=80&auto=format",
"description": "Leading technology conference organizer since 2010"
},
"ticketTiers": [
Expand Down Expand Up @@ -54,8 +54,8 @@
"name": "Summer Rock Festival",
"type": "Concert",
"featured": true,
"image": "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3",
"headerImage": "https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec",
"image": "https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1429962714451-bb934ecdc4ec?w=1200&q=80&auto=format",
"dateTime": "2024-07-20T16:00:00",
"endDateTime": "2024-07-20T23:00:00",
"location": {
Expand All @@ -71,7 +71,7 @@
"startingPrice": 79,
"organizer": {
"name": "Rock Nation Events",
"logo": "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4",
"logo": "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=100&q=80&auto=format",
"description": "Premier music festival organizer"
},
"ticketTiers": [
Expand Down Expand Up @@ -103,8 +103,8 @@
"name": "UX Design Masterclass",
"type": "Workshop",
"featured": true,
"image": "https://images.unsplash.com/photo-1531403009284-440f080d1e12",
"headerImage": "https://images.unsplash.com/photo-1558403194-611308249627",
"image": "https://images.unsplash.com/photo-1531403009284-440f080d1e12?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1558403194-611308249627?w=1200&q=80&auto=format",
"dateTime": "2024-08-05T10:00:00",
"endDateTime": "2024-08-05T17:00:00",
"location": {
Expand All @@ -120,7 +120,7 @@
"startingPrice": 199,
"organizer": {
"name": "Design Masters",
"logo": "https://images.unsplash.com/photo-1557821552-17105176677c",
"logo": "https://images.unsplash.com/photo-1557821552-17105176677c?w=100&q=80&auto=format",
"description": "Expert-led design workshops and courses"
},
"ticketTiers": [
Expand All @@ -145,8 +145,8 @@
"name": "Startup Growth Summit",
"type": "Conference",
"featured": false,
"image": "https://images.unsplash.com/photo-1475721027785-f74eccf877e2",
"headerImage": "https://images.unsplash.com/photo-1559223607-a43c990c692c",
"image": "https://images.unsplash.com/photo-1475721027785-f74eccf877e2?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1559223607-a43c990c692c?w=1200&q=80&auto=format",
"dateTime": "2024-10-10T08:30:00",
"endDateTime": "2024-10-11T17:00:00",
"location": {
Expand All @@ -162,7 +162,7 @@
"startingPrice": 249,
"organizer": {
"name": "Startup Network EU",
"logo": "https://images.unsplash.com/photo-1559223607-a43c990c692c",
"logo": "https://images.unsplash.com/photo-1559223607-a43c990c692c?w=100&q=80&auto=format",
"description": "Europe's leading startup community"
},
"ticketTiers": [
Expand Down Expand Up @@ -194,8 +194,8 @@
"name": "Evening of Jazz",
"type": "Concert",
"featured": false,
"image": "https://images.unsplash.com/photo-1415201364774-f6f0bb35f28f",
"headerImage": "https://images.unsplash.com/photo-1511192336575-5a79af67a629",
"image": "https://images.unsplash.com/photo-1415201364774-f6f0bb35f28f?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1511192336575-5a79af67a629?w=1200&q=80&auto=format",
"dateTime": "2024-06-30T19:00:00",
"endDateTime": "2024-06-30T23:00:00",
"location": {
Expand All @@ -211,7 +211,7 @@
"startingPrice": 59,
"organizer": {
"name": "Jazz & Soul Productions",
"logo": "https://images.unsplash.com/photo-1415201364774-f6f0bb35f28f",
"logo": "https://images.unsplash.com/photo-1415201364774-f6f0bb35f28f?w=100&q=80&auto=format",
"description": "Authentic jazz experiences since 1990"
},
"ticketTiers": [
Expand Down Expand Up @@ -243,8 +243,8 @@
"name": "ETHGlobal Summit",
"type": "Conference",
"featured": true,
"image": "https://images.unsplash.com/photo-1639762681485-074b7f938ba0",
"headerImage": "https://images.unsplash.com/photo-1642006953663-06f0387f5652",
"image": "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1642006953663-06f0387f5652?w=1200&q=80&auto=format",
"dateTime": "2025-03-15T09:00:00",
"endDateTime": "2025-03-17T18:00:00",
"location": {
Expand All @@ -260,7 +260,7 @@
"startingPrice": 399,
"organizer": {
"name": "ETHGlobal",
"logo": "https://images.unsplash.com/photo-1622630998477-20aa696ecb05",
"logo": "https://images.unsplash.com/photo-1622630998477-20aa696ecb05?w=100&q=80&auto=format",
"description": "Leading Ethereum ecosystem event organizer"
},
"ticketTiers": [
Expand All @@ -285,8 +285,8 @@
"name": "Digital Renaissance: NFT Art Festival",
"type": "Exhibition",
"featured": false,
"image": "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e",
"headerImage": "https://images.unsplash.com/photo-1638913662380-9799def8ffb1",
"image": "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1638913662380-9799def8ffb1?w=1200&q=80&auto=format",
"dateTime": "2025-05-20T10:00:00",
"endDateTime": "2025-05-23T20:00:00",
"location": {
Expand All @@ -302,7 +302,7 @@
"startingPrice": 89,
"organizer": {
"name": "CryptoArt Collective",
"logo": "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e",
"logo": "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=100&q=80&auto=format",
"description": "Bridging traditional and digital art"
},
"ticketTiers": [
Expand All @@ -327,8 +327,8 @@
"name": "Mediterranean Food & Wine Festival",
"type": "Festival",
"featured": false,
"image": "https://images.unsplash.com/photo-1555396273-367ea4eb4db5",
"headerImage": "https://images.unsplash.com/photo-1507434965515-61832950c743",
"image": "https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1507434965515-61832950c743?w=1200&q=80&auto=format",
"dateTime": "2025-06-10T12:00:00",
"endDateTime": "2025-06-12T22:00:00",
"location": {
Expand All @@ -344,7 +344,7 @@
"startingPrice": 129,
"organizer": {
"name": "Mediterranean Culinary Arts",
"logo": "https://images.unsplash.com/photo-1466637574441-749b8f19452f",
"logo": "https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=100&q=80&auto=format",
"description": "Celebrating Mediterranean cuisine and culture"
},
"ticketTiers": [
Expand All @@ -369,8 +369,8 @@
"name": "DeFi Innovation Summit",
"type": "Conference",
"featured": false,
"image": "https://images.unsplash.com/photo-1639762681485-074b7f938ba0",
"headerImage": "https://images.unsplash.com/photo-1642006953663-06f0387f5652",
"image": "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1642006953663-06f0387f5652?w=1200&q=80&auto=format",
"dateTime": "2025-09-05T09:00:00",
"endDateTime": "2025-09-07T18:00:00",
"location": {
Expand All @@ -386,7 +386,7 @@
"startingPrice": 599,
"organizer": {
"name": "DeFi Alliance",
"logo": "https://images.unsplash.com/photo-1622630998477-20aa696ecb05",
"logo": "https://images.unsplash.com/photo-1622630998477-20aa696ecb05?w=100&q=80&auto=format",
"description": "Advancing decentralized finance innovation"
},
"ticketTiers": [
Expand All @@ -411,8 +411,8 @@
"name": "Wayne Enterprises Annual Charity Gala",
"type": "Gala",
"featured": true,
"image": "https://images.unsplash.com/photo-1519167758481-83f550bb49b3",
"headerImage": "https://images.unsplash.com/photo-1492684223066-81342ee5ff30",
"image": "https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=400&q=80&auto=format",
"headerImage": "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=1200&q=80&auto=format",
"dateTime": "2025-10-31T19:00:00",
"endDateTime": "2025-11-01T02:00:00",
"location": {
Expand All @@ -428,7 +428,7 @@
"startingPrice": 1000,
"organizer": {
"name": "Wayne Foundation",
"logo": "https://images.unsplash.com/photo-1481819613568-3701cbc70156",
"logo": "https://images.unsplash.com/photo-1481819613568-3701cbc70156?w=100&q=80&auto=format",
"description": "Serving Gotham's community since 1939"
},
"ticketTiers": [
Expand Down