From 625eab137e267f0471d58b77520136f32293cf45 Mon Sep 17 00:00:00 2001
From: "MTG\\mtg09" <50504183+MTG2000@users.noreply.github.com>
Date: Thu, 28 Dec 2023 12:16:38 +0400
Subject: [PATCH] chore: load projects carousel image sooner

---
 .../ProjectsSelect/ProjectsSelect.tsx         | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx b/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx
index c68c183..a5be134 100644
--- a/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx
+++ b/v2/src/Components/ProjectsSelect/ProjectsSelect.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { projects } from "./projects";
 import { serifText } from "@/assets/fonts";
 import Image from "next/image";
@@ -13,12 +13,30 @@ interface Props {
 }
 
 export default function ProjectsSelect({ excludeProjects }: Props) {
-  const [emblaRef] = useEmblaCarousel();
+  const [emblaRef, empblaApi] = useEmblaCarousel();
   const router = useRouter();
 
   const [openProject, setOpenProject] = useState<
     (typeof projects)[number] | null
   >(null);
+  const [slidesInView, setSlidesInView] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (!empblaApi) return;
+
+    const updateNextSlidePriority = () => {
+      const slidesInView = empblaApi.slidesInView();
+      setSlidesInView(slidesInView);
+    };
+
+    empblaApi.on("init", updateNextSlidePriority);
+    empblaApi.on("slidesInView", updateNextSlidePriority);
+
+    return () => {
+      empblaApi.off("init", updateNextSlidePriority);
+      empblaApi.off("slidesInView", updateNextSlidePriority);
+    };
+  }, [empblaApi]);
 
   const options = projects.filter(
     (project) => !excludeProjects?.includes(project.slug)
@@ -81,6 +99,7 @@ export default function ProjectsSelect({ excludeProjects }: Props) {
                     alt=""
                     className="w-full my-42 shadow-2xl"
                     placeholder="blur"
+                    priority={slidesInView.includes(idx)}
                   />
                 </div>
               </button>