feat: improve performance on activity page

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,6 +15,86 @@ interface FixedActivitySecondaryBarProps {
   activity: any
 }
 
+// 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)}
+      className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200 ${
+        prevActivity 
+          ? 'text-gray-700 hover:bg-gray-100' 
+          : 'text-gray-300 cursor-not-allowed'
+      }`}
+      disabled={!prevActivity}
+      title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
+    >
+      <ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
+      <div className="flex flex-col items-start hidden sm:flex">
+        <span className="text-xs text-gray-500">Previous</span>
+        <span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
+          {prevActivity ? prevActivity.name : 'No previous activity'}
+        </span>
+      </div>
+    </button>
+
+    <span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
+      {currentIndex + 1} of {allActivities.length}
+    </span>
+
+    <button
+      onClick={() => navigateToActivity(nextActivity)}
+      className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200`}
+      disabled={!nextActivity}
+      title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
+    >
+      <div className="flex flex-col items-end hidden sm:flex">
+        <span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
+        <span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
+          {nextActivity ? nextActivity.name : 'No next activity'}
+        </span>
+      </div>
+      <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);
@@ -22,12 +102,11 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
   const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
   const org = useOrg() as any;
 
-  // Function to find the current activity's position in the course
-  const findActivityPosition = () => {
+  // Memoize activity position calculation
+  const { allActivities, currentIndex } = useMemo(() => {
     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_', '');
@@ -37,7 +116,6 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
           chapterName: chapter.name
         });
         
-        // Check if this is the current activity
         if (cleanActivityUuid === props.currentActivityId.replace('activity_', '')) {
           currentIndex = allActivities.length - 1;
         }
@@ -45,15 +123,11 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
     });
     
     return { allActivities, currentIndex };
-  };
+  }, [props.course, props.currentActivityId]);
   
-  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;
     
@@ -61,32 +135,26 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
     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
+        rootMargin: '-80px 0px 0px 0px'
       }
     );
 
-    // 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);
+    const mainActivityInfo = document.querySelector('.activity-info-section');
+    if (mainActivityInfo) {
+      mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
+      observer.observe(mainActivityInfo);
+    }
 
     window.addEventListener('scroll', handleScroll);
     
@@ -98,86 +166,29 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
     };
   }, []);
 
+  if (!shouldShow) return null;
+
   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">
-                <div className="flex items-center space-x-2 sm:space-x-3">
-                  <button
-                    onClick={() => navigateToActivity(prevActivity)}
-                    className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200 ${
-                      prevActivity 
-                        ? 'text-gray-700 hover:bg-gray-100' 
-                        : 'text-gray-300 cursor-not-allowed'
-                    }`}
-                    disabled={!prevActivity}
-                    title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
-                  >
-                    <ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
-                    <div className="flex flex-col items-start hidden sm:flex">
-                      <span className="text-xs text-gray-500">Previous</span>
-                      <span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
-                        {prevActivity ? prevActivity.name : 'No previous activity'}
-                      </span>
-                    </div>
-                  </button>
-
-                  <span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
-                    {currentIndex + 1} of {allActivities.length}
-                  </span>
-
-                  <button
-                    onClick={() => navigateToActivity(nextActivity)}
-                    className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200`}
-                    disabled={!nextActivity}
-                    title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
-                  >
-                    <div className="flex flex-col items-end hidden sm:flex">
-                      <span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
-                      <span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
-                        {nextActivity ? nextActivity.name : 'No next activity'}
-                      </span>
-                    </div>
-                    <ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
-                  </button>
-                </div>
-              </div>
-            </div>
+    <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,16 +1,99 @@
+'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
 }
 
+// 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 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'
+  }
+}
+
+// Memoized activity type icon component
+const ActivityTypeIcon = memo(({ activityType }: { activityType: string }) => {
+  switch (activityType) {
+    case 'TYPE_VIDEO':
+      return <Video size={16} className="text-gray-400" />
+    case 'TYPE_DOCUMENT':
+      return <FileText size={16} className="text-gray-400" />
+    case 'TYPE_DYNAMIC':
+      return <Layers size={16} className="text-gray-400" />
+    case 'TYPE_ASSIGNMENT':
+      return <BookOpenCheck size={16} className="text-gray-400" />
+    default:
+      return <FileText size={16} className="text-gray-400" />
+  }
+});
+
+ActivityTypeIcon.displayName = 'ActivityTypeIcon';
+
+// 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">
+      <ActivityTypeIcon activityType={activity.activity_type} />
+      <span className="text-sm text-gray-700">{activity.name}</span>
+      {isDone && (
+        <span className="ml-auto text-gray-400">
+          <Check size={14} />
+        </span>
+      )}
+    </div>
+    <div className="flex items-center gap-2 mt-2">
+      <span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
+        {getActivityTypeLabel(activity.activity_type)}
+      </span>
+      <span className="text-xs text-gray-400">
+        {isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
+      </span>
+    </div>
+  </div>
+));
+
+ActivityTooltipContent.displayName = 'ActivityTooltipContent';
+
 function ActivityIndicators(props: Props) {
   const course = props.course
   const orgslug = props.orgslug
@@ -22,26 +105,26 @@ function ActivityIndicators(props: Props) {
 
   const trail = props.course.trail
 
-  function isActivityDone(activity: any) {
+  // 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)
-    } else {
-      return false
     }
-  }
+    return false
+  }, [props.course]);
 
-  function isActivityCurrent(activity: any) {
+  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]);
 
-  function getActivityClass(activity: any) {
+  const getActivityClass = useMemo(() => (activity: any) => {
     if (isActivityDone(activity)) {
       return done_activity_style
     }
@@ -49,52 +132,7 @@ function ActivityIndicators(props: Props) {
       return current_activity_style
     }
     return black_activity_style
-  }
-
-  const getActivityTypeIcon = (activityType: string) => {
-    switch (activityType) {
-      case 'TYPE_VIDEO':
-        return <Video size={16} className="text-gray-400" />
-      case 'TYPE_DOCUMENT':
-        return <FileText size={16} className="text-gray-400" />
-      case 'TYPE_DYNAMIC':
-        return <Layers size={16} className="text-gray-400" />
-      case 'TYPE_ASSIGNMENT':
-        return <BookOpenCheck size={16} className="text-gray-400" />
-      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'
-    }
-  }
-
-  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'
-    }
-  }
+  }, [isActivityDone, isActivityCurrent]);
 
   return (
     <div className="grid grid-flow-col justify-stretch space-x-6">
@@ -110,25 +148,11 @@ function ActivityIndicators(props: Props) {
                     sideOffset={8}
                     unstyled
                     content={
-                      <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)}
-                          <span className="text-sm text-gray-700">{activity.name}</span>
-                          {isDone && (
-                            <span className="ml-auto text-gray-400">
-                              <Check size={14} />
-                            </span>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-2 mt-2">
-                          <span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
-                            {getActivityTypeLabel(activity.activity_type)}
-                          </span>
-                          <span className="text-xs text-gray-400">
-                            {isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
-                          </span>
-                        </div>
-                      </div>
+                      <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)