feat: improve performance on activity page

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx

@@ -1,24 +1,16 @@
 'use client'
 import Link from 'next/link'
 import { getAPIUrl, getUriWithOrg } from '@services/config/config'
-import Canva from '@components/Objects/Activities/DynamicCanva/DynamicCanva'
-import VideoActivity from '@components/Objects/Activities/Video/Video'
 import { BookOpenCheck, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, FileText, Folder, List, Menu, MoreVertical, UserRoundPen, Video, Layers, ListFilter, ListTree, X, Edit2, EllipsisVertical, Maximize2, Minimize2 } from 'lucide-react'
 import { markActivityAsComplete, unmarkActivityAsComplete } from '@services/courses/activity'
-import DocumentPdfActivity from '@components/Objects/Activities/DocumentPdf/DocumentPdf'
-import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
-import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
 import { usePathname, useRouter } from 'next/navigation'
 import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { CourseProvider } from '@components/Contexts/CourseContext'
-import AIActivityAsk from '@components/Objects/Activities/AI/AIActivityAsk'
-import AIChatBotProvider from '@components/Contexts/AI/AIChatBotContext'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useMemo, lazy, Suspense } from 'react'
 import { getAssignmentFromActivityUUID, getFinalGrade, submitAssignmentForGrading } from '@services/courses/assignments'
-import AssignmentStudentActivity from '@components/Objects/Activities/Assignment/AssignmentStudentActivity'
 import { AssignmentProvider } from '@components/Contexts/Assignments/AssignmentContext'
 import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/AssignmentsTaskContext'
 import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
@@ -36,7 +28,26 @@ import CourseEndView from '@components/Pages/Activity/CourseEndView'
 import { motion, AnimatePresence } from 'framer-motion'
 import ActivityBreadcrumbs from '@components/Pages/Activity/ActivityBreadcrumbs'
 import MiniInfoTooltip from '@components/Objects/MiniInfoTooltip'
+import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
+import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
 
+// Lazy load heavy components
+const Canva = lazy(() => import('@components/Objects/Activities/DynamicCanva/DynamicCanva'))
+const VideoActivity = lazy(() => import('@components/Objects/Activities/Video/Video'))
+const DocumentPdfActivity = lazy(() => import('@components/Objects/Activities/DocumentPdf/DocumentPdf'))
+const AssignmentStudentActivity = lazy(() => import('@components/Objects/Activities/Assignment/AssignmentStudentActivity'))
+const AIActivityAsk = lazy(() => import('@components/Objects/Activities/AI/AIActivityAsk'))
+const AIChatBotProvider = lazy(() => import('@components/Contexts/AI/AIChatBotContext'))
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <div className="flex items-center justify-center h-64">
+    <div className="relative w-6 h-6">
+      <div className="absolute top-0 left-0 w-full h-full border-2 border-gray-100 rounded-full"></div>
+      <div className="absolute top-0 left-0 w-full h-full border-2 border-gray-400 rounded-full animate-spin border-t-transparent"></div>
+    </div>
+  </div>
+);
 
 interface ActivityClientProps {
   activityid: string
@@ -55,6 +66,31 @@ interface ActivityActionsProps {
   showNavigation?: boolean
 }
 
+// Custom hook for activity position
+function useActivityPosition(course: any, activityId: string) {
+  return useMemo(() => {
+    let allActivities: any[] = [];
+    let currentIndex = -1;
+    
+    course.chapters.forEach((chapter: any) => {
+      chapter.activities.forEach((activity: any) => {
+        const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
+        allActivities.push({
+          ...activity,
+          cleanUuid: cleanActivityUuid,
+          chapterName: chapter.name
+        });
+        
+        if (cleanActivityUuid === activityId.replace('activity_', '')) {
+          currentIndex = allActivities.length - 1;
+        }
+      });
+    });
+    
+    return { allActivities, currentIndex };
+  }, [course, activityId]);
+}
+
 function ActivityActions({ activity, activityid, course, orgslug, assignment, showNavigation = true }: ActivityActionsProps) {
   const session = useLHSession() as any;
   const { contributorStatus } = useContributorStatus(course.course_uuid);
@@ -113,37 +149,55 @@ function ActivityClient(props: ActivityClientProps) {
   const { contributorStatus } = useContributorStatus(courseuuid);
   const router = useRouter();
 
-  // Function to find the current activity's position in the course
-  const findActivityPosition = () => {
-    let allActivities: any[] = [];
-    let currentIndex = -1;
-    
-    // Flatten all activities from all chapters
-    course.chapters.forEach((chapter: any) => {
-      chapter.activities.forEach((activity: any) => {
-        const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
-        allActivities.push({
-          ...activity,
-          cleanUuid: cleanActivityUuid,
-          chapterName: chapter.name
-        });
-        
-        // Check if this is the current activity
-        if (cleanActivityUuid === activityid.replace('activity_', '')) {
-          currentIndex = allActivities.length - 1;
-        }
-      });
-    });
-    
-    return { allActivities, currentIndex };
-  };
-  
-  const { allActivities, currentIndex } = findActivityPosition();
+  // Memoize activity position calculation
+  const { allActivities, currentIndex } = useActivityPosition(course, activityid);
   
   // Get previous and next activities
   const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
   const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
 
+  // Memoize activity content
+  const activityContent = useMemo(() => {
+    if (!activity || !activity.published || activity.content.paid_access === false) {
+      return null;
+    }
+
+    switch (activity.activity_type) {
+      case 'TYPE_DYNAMIC':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <Canva content={activity.content} activity={activity} />
+          </Suspense>
+        );
+      case 'TYPE_VIDEO':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <VideoActivity course={course} activity={activity} />
+          </Suspense>
+        );
+      case 'TYPE_DOCUMENT':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <DocumentPdfActivity course={course} activity={activity} />
+          </Suspense>
+        );
+      case 'TYPE_ASSIGNMENT':
+        return assignment ? (
+          <Suspense fallback={<LoadingFallback />}>
+            <AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
+              <AssignmentsTaskProvider>
+                <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
+                  <AssignmentStudentActivity />
+                </AssignmentSubmissionProvider>
+              </AssignmentsTaskProvider>
+            </AssignmentProvider>
+          </Suspense>
+        ) : null;
+      default:
+        return null;
+    }
+  }, [activity, course, assignment]);
+
   // Navigate to an activity
   const navigateToActivity = (activity: any) => {
     if (!activity) return;
@@ -208,6 +262,7 @@ function ActivityClient(props: ActivityClientProps) {
   return (
     <>
       <CourseProvider courseuuid={course?.course_uuid}>
+        <Suspense fallback={<LoadingFallback />}>
           <AIChatBotProvider>
             {isFocusMode ? (
               <AnimatePresence>
@@ -334,33 +389,7 @@ function ActivityClient(props: ActivityClientProps) {
                             >
                               {/* Activity Types */}
                               <div>
-                              {activity.activity_type == 'TYPE_DYNAMIC' && (
-                                <Canva content={activity.content} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_VIDEO' && (
-                                <VideoActivity course={course} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_DOCUMENT' && (
-                                <DocumentPdfActivity
-                                  course={course}
-                                  activity={activity}
-                                />
-                              )}
-                              {activity.activity_type == 'TYPE_ASSIGNMENT' && (
-                                <div>
-                                  {assignment ? (
-                                    <AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
-                                      <AssignmentsTaskProvider>
-                                        <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
-                                          <AssignmentStudentActivity />
-                                        </AssignmentSubmissionProvider>
-                                      </AssignmentsTaskProvider>
-                                    </AssignmentProvider>
-                                  ) : (
-                                    <div></div>
-                                  )}
-                                </div>
-                              )}
+                                {activityContent}
                               </div>
                             </motion.div>
                           )}
@@ -566,36 +595,7 @@ function ActivityClient(props: ActivityClientProps) {
                             <PaidCourseActivityDisclaimer course={course} />
                           ) : (
                             <div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
-                            {/* Activity Types */}
-                            <div>
-                              {activity.activity_type == 'TYPE_DYNAMIC' && (
-                                <Canva content={activity.content} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_VIDEO' && (
-                                <VideoActivity course={course} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_DOCUMENT' && (
-                                <DocumentPdfActivity
-                                  course={course}
-                                  activity={activity}
-                                />
-                              )}
-                              {activity.activity_type == 'TYPE_ASSIGNMENT' && (
-                                <div>
-                                  {assignment ? (
-                                    <AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
-                                      <AssignmentsTaskProvider>
-                                        <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
-                                          <AssignmentStudentActivity />
-                                        </AssignmentSubmissionProvider>
-                                      </AssignmentsTaskProvider>
-                                    </AssignmentProvider>
-                                  ) : (
-                                    <div></div>
-                                  )}
-                                </div>
-                              )}
-                            </div>
+                              {activityContent}
                             </div>
                           )}
                         </>
@@ -646,6 +646,7 @@ function ActivityClient(props: ActivityClientProps) {
               </GeneralWrapperStyled>
             )}
           </AIChatBotProvider>
+        </Suspense>
       </CourseProvider>
     </>
   )

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx

@@ -78,7 +78,7 @@ const ActivityPage = async (params: any) => {
     fetchCourseMetadata(courseuuid, access_token),
     getActivityWithAuthHeader(
       activityid,
-      { revalidate: 0, tags: ['activities'] },
+      { revalidate: 60, tags: ['activities'] },
       access_token || null
     )
   ])

apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx

@@ -24,7 +24,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
   })
   const course_meta = await getCourseMetadata(
     params.courseuuid,
-    { revalidate: 1800, tags: ['courses'] },
+    { revalidate: 0, tags: ['courses'] },
     access_token ? access_token : null
   )
 

apps/web/components/Pages/Activity/FixedActivitySecondaryBar.tsx

@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { getUriWithOrg } from '@services/config/config'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef, useMemo, memo } from 'react'
 import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
 import ActivityChapterDropdown from './ActivityChapterDropdown'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
@@ -15,125 +15,20 @@ interface FixedActivitySecondaryBarProps {
   activity: any
 }
 
-export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
-  const router = useRouter();
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [shouldShow, setShouldShow] = useState(false);
-  const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
-  const org = useOrg() as any;
-
-  // Function to find the current activity's position in the course
-  const findActivityPosition = () => {
-    let allActivities: any[] = [];
-    let currentIndex = -1;
-    
-    // Flatten all activities from all chapters
-    props.course.chapters.forEach((chapter: any) => {
-      chapter.activities.forEach((activity: any) => {
-        const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
-        allActivities.push({
-          ...activity,
-          cleanUuid: cleanActivityUuid,
-          chapterName: chapter.name
-        });
-        
-        // Check if this is the current activity
-        if (cleanActivityUuid === props.currentActivityId.replace('activity_', '')) {
-          currentIndex = allActivities.length - 1;
-        }
-      });
-    });
-    
-    return { allActivities, currentIndex };
-  };
-  
-  const { allActivities, currentIndex } = findActivityPosition();
-  
-  // Get previous and next activities
-  const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
-  const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
-  
-  // Navigate to an activity
-  const navigateToActivity = (activity: any) => {
-    if (!activity) return;
-    
-    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
-    router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
-  };
-
-  // Handle scroll and intersection observer
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 0);
-    };
-
-    // Set up intersection observer for the main activity info
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        // Show the fixed bar when the main info is not visible
-        setShouldShow(!entry.isIntersecting);
-      },
-      {
-        threshold: [0, 0.1, 1],
-        rootMargin: '-80px 0px 0px 0px' // Increased margin to account for the header
-      }
-    );
-
-    // Start observing the main activity info section with a slight delay to ensure DOM is ready
-    setTimeout(() => {
-      const mainActivityInfo = document.querySelector('.activity-info-section');
-      if (mainActivityInfo) {
-        mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
-        observer.observe(mainActivityInfo);
-      }
-    }, 100);
-
-    window.addEventListener('scroll', handleScroll);
-    
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-      if (mainActivityInfoRef.current) {
-        observer.unobserve(mainActivityInfoRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <>
-      {shouldShow && (
-        <div 
-          className={`fixed top-[60px] left-0 right-0 z-40 bg-white/90 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-top ${
-            isScrolled ? 'nice-shadow' : ''
-          }`}
-        >
-          <div className="container mx-auto px-4">
-            <div className="flex items-center justify-between h-16 py-2">
-              {/* Left Section - Course Info and Navigation */}
-              <div className="flex items-center space-x-2 sm:space-x-4 min-w-0 flex-shrink">
-                <img
-                  className="w-[35px] sm:w-[45px] h-[20px] sm:h-[26px] rounded-md object-cover flex-shrink-0"
-                  src={`${getCourseThumbnailMediaDirectory(
-                    org?.org_uuid,
-                    props.course.course_uuid,
-                    props.course.thumbnail_image
-                  )}`}
-                  alt=""
-                />
-                <ActivityChapterDropdown
-                  course={props.course}
-                  currentActivityId={props.currentActivityId}
-                  orgslug={props.orgslug}
-                />
-                <div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
-                  <p className="text-sm font-medium text-gray-500">Course</p>
-                  <h1 className="font-semibold text-gray-900 text-base truncate">
-                    {props.course.name}
-                  </h1>
-                </div>
-              </div>
-
-              {/* Right Section - Navigation Controls */}
-              <div className="flex items-center flex-shrink-0">
+// Memoized navigation buttons component
+const NavigationButtons = memo(({ 
+  prevActivity, 
+  nextActivity, 
+  currentIndex, 
+  allActivities, 
+  navigateToActivity 
+}: { 
+  prevActivity: any, 
+  nextActivity: any, 
+  currentIndex: number, 
+  allActivities: any[], 
+  navigateToActivity: (activity: any) => void 
+}) => (
   <div className="flex items-center space-x-2 sm:space-x-3">
     <button
       onClick={() => navigateToActivity(prevActivity)}
@@ -173,11 +68,127 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
       <ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
     </button>
   </div>
+));
+
+NavigationButtons.displayName = 'NavigationButtons';
+
+// Memoized course info component
+const CourseInfo = memo(({ course, org }: { course: any, org: any }) => (
+  <div className="flex items-center space-x-2 sm:space-x-4 min-w-0 flex-shrink">
+    <img
+      className="w-[35px] sm:w-[45px] h-[20px] sm:h-[26px] rounded-md object-cover flex-shrink-0"
+      src={`${getCourseThumbnailMediaDirectory(
+        org?.org_uuid,
+        course.course_uuid,
+        course.thumbnail_image
+      )}`}
+      alt=""
+    />
+    <div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
+      <p className="text-sm font-medium text-gray-500">Course</p>
+      <h1 className="font-semibold text-gray-900 text-base truncate">
+        {course.name}
+      </h1>
+    </div>
+  </div>
+));
+
+CourseInfo.displayName = 'CourseInfo';
+
+export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
+  const router = useRouter();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [shouldShow, setShouldShow] = useState(false);
+  const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
+  const org = useOrg() as any;
+
+  // Memoize activity position calculation
+  const { allActivities, currentIndex } = useMemo(() => {
+    let allActivities: any[] = [];
+    let currentIndex = -1;
+    
+    props.course.chapters.forEach((chapter: any) => {
+      chapter.activities.forEach((activity: any) => {
+        const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
+        allActivities.push({
+          ...activity,
+          cleanUuid: cleanActivityUuid,
+          chapterName: chapter.name
+        });
+        
+        if (cleanActivityUuid === props.currentActivityId.replace('activity_', '')) {
+          currentIndex = allActivities.length - 1;
+        }
+      });
+    });
+    
+    return { allActivities, currentIndex };
+  }, [props.course, props.currentActivityId]);
+  
+  const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
+  const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
+  
+  const navigateToActivity = (activity: any) => {
+    if (!activity) return;
+    
+    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
+    router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
+  };
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setShouldShow(!entry.isIntersecting);
+      },
+      {
+        threshold: [0, 0.1, 1],
+        rootMargin: '-80px 0px 0px 0px'
+      }
+    );
+
+    const mainActivityInfo = document.querySelector('.activity-info-section');
+    if (mainActivityInfo) {
+      mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
+      observer.observe(mainActivityInfo);
+    }
+
+    window.addEventListener('scroll', handleScroll);
+    
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (mainActivityInfoRef.current) {
+        observer.unobserve(mainActivityInfoRef.current);
+      }
+    };
+  }, []);
+
+  if (!shouldShow) return null;
+
+  return (
+    <div 
+      className={`fixed top-[60px] left-0 right-0 z-40 bg-white/90 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-top ${
+        isScrolled ? 'nice-shadow' : ''
+      }`}
+    >
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16 py-2">
+          <CourseInfo course={props.course} org={org} />
+          
+          <div className="flex items-center flex-shrink-0">
+            <NavigationButtons
+              prevActivity={prevActivity}
+              nextActivity={nextActivity}
+              currentIndex={currentIndex}
+              allActivities={allActivities}
+              navigateToActivity={navigateToActivity}
+            />
           </div>
         </div>
       </div>
     </div>
-      )}
-    </>
   );
 } 

apps/web/components/Pages/Courses/ActivityIndicators.tsx

@@ -1,57 +1,50 @@
+'use client'
+import { BookOpenCheck, Check, FileText, Layers, Video } from 'lucide-react'
+import React, { useMemo, memo } from 'react'
 import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
 import { getUriWithOrg } from '@services/config/config'
 import Link from 'next/link'
-import React from 'react'
-import { Video, FileText, Layers, BookOpenCheck, Check } from 'lucide-react'
 
 interface Props {
   course: any
   orgslug: string
   course_uuid: string
-  current_activity?: any
+  current_activity?: string
 }
 
-function ActivityIndicators(props: Props) {
-  const course = props.course
-  const orgslug = props.orgslug
-  const courseid = props.course_uuid.replace('course_', '')
-
-  const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
-  const black_activity_style = 'bg-zinc-300 hover:bg-zinc-400'
-  const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
-
-  const trail = props.course.trail
-
-  function isActivityDone(activity: any) {
-    let run = props.course.trail?.runs.find(
-      (run: any) => run.course_id == props.course.id
-    )
-    if (run) {
-      return run.steps.find((step: any) => step.activity_id == activity.id)
-    } else {
-      return false
+// Helper functions
+function getActivityTypeLabel(activityType: string): string {
+  switch (activityType) {
+    case 'TYPE_VIDEO':
+      return 'Video'
+    case 'TYPE_DOCUMENT':
+      return 'Document'
+    case 'TYPE_DYNAMIC':
+      return 'Interactive'
+    case 'TYPE_ASSIGNMENT':
+      return 'Assignment'
+    default:
+      return 'Unknown'
   }
 }
 
-  function isActivityCurrent(activity: any) {
-    let activity_uuid = activity.activity_uuid.replace('activity_', '')
-    if (props.current_activity && props.current_activity == activity_uuid) {
-      return true
+function getActivityTypeBadgeColor(activityType: string): string {
+  switch (activityType) {
+    case 'TYPE_VIDEO':
+      return 'bg-blue-100 text-blue-700'
+    case 'TYPE_DOCUMENT':
+      return 'bg-purple-100 text-purple-700'
+    case 'TYPE_DYNAMIC':
+      return 'bg-green-100 text-green-700'
+    case 'TYPE_ASSIGNMENT':
+      return 'bg-orange-100 text-orange-700'
+    default:
+      return 'bg-gray-100 text-gray-700'
   }
-    return false
 }
 
-  function getActivityClass(activity: any) {
-    if (isActivityDone(activity)) {
-      return done_activity_style
-    }
-    if (isActivityCurrent(activity)) {
-      return current_activity_style
-    }
-    return black_activity_style
-  }
-
-  const getActivityTypeIcon = (activityType: string) => {
+// Memoized activity type icon component
+const ActivityTypeIcon = memo(({ activityType }: { activityType: string }) => {
   switch (activityType) {
     case 'TYPE_VIDEO':
       return <Video size={16} className="text-gray-400" />
@@ -64,55 +57,23 @@ function ActivityIndicators(props: Props) {
     default:
       return <FileText size={16} className="text-gray-400" />
   }
-  }
+});
 
-  const getActivityTypeLabel = (activityType: string) => {
-    switch (activityType) {
-      case 'TYPE_VIDEO':
-        return 'Video'
-      case 'TYPE_DOCUMENT':
-        return 'Document'
-      case 'TYPE_DYNAMIC':
-        return 'Page'
-      case 'TYPE_ASSIGNMENT':
-        return 'Assignment'
-      default:
-        return 'Learning Material'
-    }
-  }
+ActivityTypeIcon.displayName = 'ActivityTypeIcon';
 
-  const getActivityTypeBadgeColor = (activityType: string) => {
-    switch (activityType) {
-      case 'TYPE_VIDEO':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      case 'TYPE_DOCUMENT':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      case 'TYPE_DYNAMIC':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      case 'TYPE_ASSIGNMENT':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      default:
-        return 'bg-gray-100 text-gray-700 font-bold'
-    }
-  }
-
-  return (
-    <div className="grid grid-flow-col justify-stretch space-x-6">
-      {course.chapters.map((chapter: any) => {
-        return (
-          <React.Fragment key={chapter.id || `chapter-${chapter.name}`}>
-            <div className="grid grid-flow-col justify-stretch space-x-2">
-              {chapter.activities.map((activity: any) => {
-                const isDone = isActivityDone(activity)
-                const isCurrent = isActivityCurrent(activity)
-                return (
-                  <ToolTip
-                    sideOffset={8}
-                    unstyled
-                    content={
+// Memoized activity tooltip content
+const ActivityTooltipContent = memo(({ 
+  activity, 
+  isDone, 
+  isCurrent 
+}: { 
+  activity: any, 
+  isDone: boolean, 
+  isCurrent: boolean 
+}) => (
   <div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
     <div className="flex items-center gap-2">
-                          {getActivityTypeIcon(activity.activity_type)}
+      <ActivityTypeIcon activityType={activity.activity_type} />
       <span className="text-sm text-gray-700">{activity.name}</span>
       {isDone && (
         <span className="ml-auto text-gray-400">
@@ -129,6 +90,69 @@ function ActivityIndicators(props: Props) {
       </span>
     </div>
   </div>
+));
+
+ActivityTooltipContent.displayName = 'ActivityTooltipContent';
+
+function ActivityIndicators(props: Props) {
+  const course = props.course
+  const orgslug = props.orgslug
+  const courseid = props.course_uuid.replace('course_', '')
+
+  const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
+  const black_activity_style = 'bg-zinc-300 hover:bg-zinc-400'
+  const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
+
+  const trail = props.course.trail
+
+  // Memoize activity status checks
+  const isActivityDone = useMemo(() => (activity: any) => {
+    let run = props.course.trail?.runs.find(
+      (run: any) => run.course_id == props.course.id
+    )
+    if (run) {
+      return run.steps.find((step: any) => step.activity_id == activity.id)
+    }
+    return false
+  }, [props.course]);
+
+  const isActivityCurrent = useMemo(() => (activity: any) => {
+    let activity_uuid = activity.activity_uuid.replace('activity_', '')
+    if (props.current_activity && props.current_activity == activity_uuid) {
+      return true
+    }
+    return false
+  }, [props.current_activity]);
+
+  const getActivityClass = useMemo(() => (activity: any) => {
+    if (isActivityDone(activity)) {
+      return done_activity_style
+    }
+    if (isActivityCurrent(activity)) {
+      return current_activity_style
+    }
+    return black_activity_style
+  }, [isActivityDone, isActivityCurrent]);
+
+  return (
+    <div className="grid grid-flow-col justify-stretch space-x-6">
+      {course.chapters.map((chapter: any) => {
+        return (
+          <React.Fragment key={chapter.id || `chapter-${chapter.name}`}>
+            <div className="grid grid-flow-col justify-stretch space-x-2">
+              {chapter.activities.map((activity: any) => {
+                const isDone = isActivityDone(activity)
+                const isCurrent = isActivityCurrent(activity)
+                return (
+                  <ToolTip
+                    sideOffset={8}
+                    unstyled
+                    content={
+                      <ActivityTooltipContent 
+                        activity={activity}
+                        isDone={isDone}
+                        isCurrent={isCurrent}
+                      />
                     }
                     key={activity.activity_uuid}
                   >
@@ -143,9 +167,7 @@ function ActivityIndicators(props: Props) {
                       }
                     >
                       <div
-                        className={`h-[7px] w-auto ${getActivityClass(
-                          activity
-                        )} rounded-lg`}
+                        className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg`}
                       ></div>
                     </Link>
                   </ToolTip>
@@ -159,4 +181,4 @@ function ActivityIndicators(props: Props) {
   )
 }
 
-export default ActivityIndicators
+export default memo(ActivityIndicators)