feat: optimize banner rendering performance (#3519)

Co-authored-by: Ansh Goyal <[email protected]>%0ACo-authored-by: asyncapi-bot <[email protected]>
asyncapi · Jan 27, 2025 · eda1544 · eda1544
1 parent 61b3af2
commit eda1544
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/components/campaigns/AnnouncementHero.tsx b/components/campaigns/AnnouncementHero.tsx
@@ -62,21 +62,28 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
         )}
         <div className='relative flex w-5/6 flex-col items-center justify-center gap-2'>
           <div className='relative flex min-h-72 w-full items-center justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]'>
-            {visibleBanners.map((banner, index) => (
-              <Banner
-                key={index}
-                title={banner.title}
-                dateLocation={banner.dateLocation}
-                cfaText={banner.cfaText}
-                eventName={banner.eventName}
-                cfpDeadline={banner.cfpDeadline}
-                link={banner.link}
-                city={banner.city}
-                activeBanner={index === activeIndex % numberOfVisibleBanners}
-                className={className}
-                small={small}
-              />
-            ))}
+            {visibleBanners.map((banner, index) => {
+              // Only render active banner and immediate neighbors
+              const isVisible = Math.abs(index - (activeIndex % numberOfVisibleBanners)) <= 1;
+
+              if (!isVisible) return null;
+
+              return (
+                <Banner
+                  key={index}
+                  title={banner.title}
+                  dateLocation={banner.dateLocation}
+                  cfaText={banner.cfaText}
+                  eventName={banner.eventName}
+                  cfpDeadline={banner.cfpDeadline}
+                  link={banner.link}
+                  city={banner.city}
+                  activeBanner={index === activeIndex % numberOfVisibleBanners}
+                  className={className}
+                  small={small}
+                />
+              );
+            })}
           </div>
           <div className='m-auto flex justify-center'>
             {visibleBanners.map((banner, index) => (