From 7575e7b22a00ccacc32c1a8aefc0ba4a0cab478f Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Sun, 1 Sep 2024 11:08:01 +0200
Subject: [PATCH] feat: Add lazy loading for images in marketplace

The code changes include:
- Importing the `Image` component from `next/legacy/image` instead of `next/image` in multiple files.
- Adding a new `CachedImage` component that uses the `Image` component with a custom loader.
- Updating the `MarketplacePage` component to pass the `themes` prop to the `MarketplacePage` component.
---
 src/app/themes/page.tsx        | 17 +++++++++++++++--
 src/components/marketplace.tsx |  7 +------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/themes/page.tsx b/src/app/themes/page.tsx
index 4dd2eda..85b17b3 100644
--- a/src/app/themes/page.tsx
+++ b/src/app/themes/page.tsx
@@ -2,11 +2,24 @@
 import Footer from "@/components/footer";
 import MarketplacePage from "@/components/marketplace";
 import { Navigation } from "@/components/navigation";
+import { getAllThemes, ZenTheme } from "@/lib/themes";
+import { GetStaticProps } from "next";
 
-export default function ThemesMarketplace() {
+export const getStaticProps = (async (context) => {
+  const themes = await getAllThemes();
+  return {
+    props: {
+      themes,
+    },
+  };
+}) satisfies GetStaticProps<{
+  themes: ZenTheme[];
+}>
+
+export default function ThemesMarketplace({ themes }: {themes:ZenTheme[]}) {
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <MarketplacePage />
+      <MarketplacePage themes={themes} />
       <Footer />  
       <Navigation /> {/* At the bottom of the page */}
     </main>   
diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx
index 4f3795b..9bcfdbc 100644
--- a/src/components/marketplace.tsx
+++ b/src/components/marketplace.tsx
@@ -5,14 +5,9 @@ import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
 import ThemeCard from "./theme-card";
 import { Button } from "./ui/button";
 
-export default function MarketplacePage() {
+export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
   const [searchInput, setSearchInput] = React.useState("");
   const [tags, setTags] = React.useState<string[]>(["all"]);
-  const [themes, setThemes] = React.useState<ZenTheme[]>([]);
-
-  React.useEffect(() => {
-    getAllThemes().then(setThemes);
-  }, []);
 
   return (
     <div className="flex flex-col w-full mx-auto items-center justify-center h-full">