tenders lazy-loading

app/[locale]/notifications/tenders/TendersList.tsx

@@ -27,6 +27,8 @@ interface TendersListProps {
   deletingId?: number | null;
 }
 
+export default TendersList;
+
 export function TendersList({
   tenders,
   locale,

app/[locale]/notifications/tenders/TendersPageClient.tsx

@@ -1,17 +1,38 @@
 'use client';
 
+import React from 'react';
 import Link from 'next/link';
 import { useState } from 'react';
 import { FaPlus } from 'react-icons/fa';
 
 import { Button } from '~/components/buttons';
+import { DynamicLazy } from '~/components/lazy/DynamicLazy';
 import {
   deleteTenderAction,
   type TenderWithStatus,
 } from '~/server/actions/tenders';
 import type { TendersTranslations } from '~/i18n/translate/tenders';
 
-import { TendersList } from './TendersList';
+type LazyTendersListProps = React.JSX.IntrinsicAttributes & {
+  tenders: TenderWithStatus[];
+  locale: string;
+  canManage: boolean;
+  text: TendersTranslations;
+  isArchived: boolean;
+  onDelete?: (id: number) => Promise<void>;
+  deletingId?: number | null;
+};
+
+const LazyTendersList = DynamicLazy<LazyTendersListProps>(
+  () => import('./TendersList').then((mod) => ({ default: mod.default })),
+  {
+    fallback: (
+      <div className="rounded-lg border border-neutral-200 bg-neutral-50 p-8 text-center text-neutral-600">
+        Loading tenders...
+      </div>
+    ),
+  }
+);
 
 interface TendersPageClientProps {
   allTenders: TenderWithStatus[];
@@ -41,7 +62,6 @@ export function TendersPageClient({
   // Handle delete - updates state for both tabs
   const handleDelete = async (id: number) => {
     if (!confirm(text.confirmDelete)) return;
-
     setDeletingId(id);
     try {
       const result = await deleteTenderAction(id);
@@ -78,6 +98,8 @@ export function TendersPageClient({
       <div className="mb-6 flex gap-2">
         <button
           onClick={() => setActiveTab('live')}
+          onMouseEnter={() => void LazyTendersList.preload()}
+          onFocus={() => void LazyTendersList.preload()}
           className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
             activeTab === 'live'
               ? 'text-white bg-primary-700'
@@ -88,6 +110,8 @@ export function TendersPageClient({
         </button>
         <button
           onClick={() => setActiveTab('archived')}
+          onMouseEnter={() => void LazyTendersList.preload()}
+          onFocus={() => void LazyTendersList.preload()}
           className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
             activeTab === 'archived'
               ? 'text-white bg-primary-700'
@@ -99,7 +123,7 @@ export function TendersPageClient({
       </div>
 
       {/* Tenders List */}
-      <TendersList
+      <LazyTendersList
         tenders={displayedTenders}
         locale={locale}
         canManage={canManage}

app/[locale]/notifications/tenders/page.tsx

@@ -1,9 +1,6 @@
-import { Suspense } from 'react';
-
 import { getTranslations } from '~/i18n/translations';
 import { canManageNotifications, getServerAuthSession } from '~/server/auth';
 import ImageHeader from '~/components/image-header';
-import Loading from '~/components/loading';
 import { getAllTenders } from '~/server/actions/tenders';
 
 import { TendersPageClient } from './TendersPageClient';
@@ -29,14 +26,12 @@ export default async function TendersPage({
     <>
       <ImageHeader title={text.title} src="assets/academics.png" />
 
-      <Suspense fallback={<Loading />}>
-        <TendersPageClient
-          allTenders={allTenders}
-          locale={locale}
-          canManage={canManage}
-          text={text}
-        />
-      </Suspense>
+      <TendersPageClient
+        allTenders={allTenders}
+        locale={locale}
+        canManage={canManage}
+        text={text}
+      />
     </>
   );
 }

components/lazy/DynamicLazy.tsx

@@ -0,0 +1,46 @@
+import React, {
+  type ComponentType,
+  lazy,
+  type LazyExoticComponent,
+  Suspense,
+} from 'react';
+
+export interface DynamicLazyOptions {
+  fallback?: React.ReactNode;
+}
+
+export interface DynamicLazyComponent<P> {
+  (props: P): JSX.Element;
+  preload: () => Promise<void>;
+}
+
+export function DynamicLazy<P extends React.JSX.IntrinsicAttributes>(
+  loader: () => Promise<{ default: React.ComponentType<P> }>,
+  options?: DynamicLazyOptions
+): DynamicLazyComponent<P> {
+  let LoadedComponent: LazyExoticComponent<ComponentType<P>> | null = null;
+  let loadPromise: Promise<void> | null = null;
+
+  function preload(): Promise<void> {
+    if (!loadPromise) {
+      loadPromise = loader().then((mod) => {
+        LoadedComponent = lazy(() => Promise.resolve(mod));
+      });
+    }
+    return loadPromise ?? Promise.resolve();
+  }
+
+  const LazyComponent = (props: P) => {
+    if (!LoadedComponent) {
+      LoadedComponent = lazy(loader);
+    }
+    const Component = LoadedComponent;
+    return (
+      <Suspense fallback={options?.fallback ?? null}>
+        <Component {...(props as React.PropsWithRef<P>)} />
+      </Suspense>
+    );
+  };
+  (LazyComponent as DynamicLazyComponent<P>).preload = preload;
+  return LazyComponent as DynamicLazyComponent<P>;
+}

components/lazy/LazyLoadBoundary.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useIntersectionObserver } from './useIntersectionObserver';
+import { useIdleCallback } from './useIdleCallback';
+
+export type LazyLoadTrigger = 'viewport' | 'interaction' | 'immediate';
+
+export interface LazyLoadBoundaryProps {
+  trigger?: LazyLoadTrigger;
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+  rootMargin?: string;
+  threshold?: number;
+  preloadOnHover?: boolean;
+  preloadOnIdle?: boolean;
+  keepMounted?: boolean;
+  onPreload?: () => void;
+}
+
+export const LazyLoadBoundary: React.FC<LazyLoadBoundaryProps> = ({
+  trigger = 'viewport',
+  fallback = null,
+  children,
+  rootMargin = '0px',
+  threshold = 0,
+  preloadOnHover = false,
+  preloadOnIdle = false,
+  keepMounted = false,
+  onPreload,
+}) => {
+  const [mounted, setMounted] = useState(trigger === 'immediate');
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [ref, inView] = useIntersectionObserver({ rootMargin, threshold });
+  const hasMountedRef = useRef<boolean>(false);
+
+  // Preload on hover
+  const handleMouseEnter = useCallback(() => {
+    if (preloadOnHover && onPreload) onPreload();
+    if (trigger === 'interaction') setHasInteracted(true);
+  }, [preloadOnHover, onPreload, trigger]);
+
+  // Preload on idle
+  useIdleCallback(() => {
+    if (preloadOnIdle && onPreload) onPreload();
+  }, [preloadOnIdle, onPreload]);
+
+  // Mount logic
+  useEffect(() => {
+    if (trigger === 'immediate') {
+      setMounted(true);
+    } else if (trigger === 'viewport' && inView) {
+      setMounted(true);
+    } else if (trigger === 'interaction' && hasInteracted) {
+      setMounted(true);
+    }
+  }, [trigger, inView, hasInteracted]);
+
+  // Keep mounted
+  useEffect(() => {
+    if (mounted && keepMounted) {
+      hasMountedRef.current = true;
+    }
+  }, [mounted, keepMounted]);
+
+  // Clean up interaction state if not keepMounted
+  useEffect(() => {
+    return () => {
+      if (!keepMounted) {
+        setMounted(false);
+        setHasInteracted(false);
+      }
+    };
+  }, [keepMounted]);
+
+  // Render logic
+  if (mounted || hasMountedRef.current) {
+    return (
+      <div
+        ref={
+          trigger === 'viewport'
+            ? (ref as React.RefObject<HTMLDivElement>)
+            : undefined
+        }
+      >
+        {children}
+      </div>
+    );
+  }
+  return (
+    <div
+      ref={
+        trigger === 'viewport'
+          ? (ref as React.RefObject<HTMLDivElement>)
+          : undefined
+      }
+      onClick={
+        trigger === 'interaction' ? () => setHasInteracted(true) : undefined
+      }
+      onMouseEnter={handleMouseEnter}
+      style={{ width: '100%', height: '100%' }}
+    >
+      {fallback}
+    </div>
+  );
+};

components/lazy/examples.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import type { CarouselProps } from '~/components/carousels';
+
+// import type { CarouselProps } from '~/components/carousels';
+import { LazyLoadBoundary } from './LazyLoadBoundary';
+import { DynamicLazy } from './DynamicLazy';
+
+// Match the actual EventItem type from event-section.tsx
+interface EventItem {
+  title: string;
+  categories?: string[];
+  startDate: string | Date;
+  endDate?: string | Date;
+  time?: string;
+  description: string;
+  images: string[];
+  location?: string;
+  id: number;
+}
+
+interface EventSectionProps extends React.JSX.IntrinsicAttributes {
+  events: EventItem[];
+  locale: string;
+  showViewAll?: boolean;
+  viewAllText?: string;
+  viewAllHref?: string;
+}
+
+const EventsGallery = DynamicLazy<EventSectionProps>(() =>
+  import('../events/event-section').then((mod) => ({ default: mod.default }))
+);
+
+interface GalleryCarouselProps extends React.JSX.IntrinsicAttributes {
+  carouselProps?: CarouselProps;
+  children: React.ReactNode[];
+  className?: string;
+  itemClassName?: string;
+}
+
+const GalleryBelowFold = DynamicLazy<GalleryCarouselProps>(() =>
+  import('../carousels/gallery').then((mod) => ({
+    default: mod.GalleryCarousel,
+  }))
+);
+
+export function ExampleEventsGallery() {
+  return (
+    <LazyLoadBoundary
+      trigger="interaction"
+      fallback={<div>Loading Gallery...</div>}
+    >
+      <EventsGallery events={[]} locale="en" />
+    </LazyLoadBoundary>
+  );
+  // All examples above demonstrate different trigger modes and usage patterns.
+}

components/lazy/useIdleCallback.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+
+interface WindowWithIdleCallback extends Window {
+  requestIdleCallback: (callback: IdleRequestCallback) => number;
+  cancelIdleCallback: (id: number) => void;
+  setTimeout: (callback: () => void, ms: number) => number;
+  clearTimeout: (id: number) => void;
+}
+
+export function useIdleCallback(
+  cb: () => void,
+  _deps: React.DependencyList = []
+) {
+  useEffect(() => {
+    let id: number | null = null;
+    if ('requestIdleCallback' in window) {
+      id = (window as WindowWithIdleCallback).requestIdleCallback(cb);
+    } else {
+      id = (window as WindowWithIdleCallback).setTimeout(cb, 200);
+    }
+    return () => {
+      if (id !== null) {
+        if ('cancelIdleCallback' in window) {
+          (window as WindowWithIdleCallback).cancelIdleCallback(id);
+        } else {
+          clearTimeout(id);
+        }
+      }
+    };
+  }, [cb]);
+}

components/lazy/useIntersectionObserver.ts

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from 'react';
+
+export interface UseIntersectionObserverOptions {
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number | number[];
+  freezeOnceVisible?: boolean;
+}
+
+export function useIntersectionObserver<T extends Element>(
+  options: UseIntersectionObserverOptions = {}
+): [React.RefObject<T>, boolean] {
+  const {
+    root = null,
+    rootMargin = '0px',
+    threshold = 0,
+    freezeOnceVisible = true,
+  } = options;
+  const ref = useRef<T>(null);
+  const [isIntersecting, setIntersecting] = useState<boolean>(false);
+  const frozen = isIntersecting && freezeOnceVisible;
+
+  useEffect(() => {
+    if (frozen) return;
+    const node = ref.current;
+    if (!node) return;
+    let observer: IntersectionObserver | null = null;
+    observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      { root, rootMargin, threshold }
+    );
+    observer.observe(node);
+    return () => {
+      observer && observer.disconnect();
+    };
+  }, [root, rootMargin, threshold, frozen]);
+
+  return [ref, isIntersecting];
+}