[comp] Production Deploy

apps/portal/src/app/(app)/(home)/[orgId]/components/video/VideoCarousel.tsx

@@ -52,7 +52,7 @@ export function VideoCarousel({ videos }: VideoCarouselProps) {
 
   const [completedVideoIds, setCompletedVideoIds] = useState<Set<string>>(initialCompletedVideoIds);
 
-  const { execute: executeMarkComplete } = useAction(markVideoAsCompleted, {
+  const { execute: executeMarkComplete, isExecuting } = useAction(markVideoAsCompleted, {
     onSuccess: (data) => {
       // Update local UI state immediately upon successful action
       const completedMetadataId = mergedVideos[currentIndex].id;
@@ -134,6 +134,7 @@ export function VideoCarousel({ videos }: VideoCarouselProps) {
             video={mergedVideos[currentIndex]} // Pass the merged object
             isCompleted={isCurrentVideoCompleted} // Use local state for UI
             onComplete={handleVideoComplete}
+            isMarkingComplete={isExecuting}
             onNext={isCurrentVideoCompleted && hasNextVideo ? goToNext : undefined}
             allVideosCompleted={allVideosCompleted} // Use local state for UI
             onWatchAgain={() => {

apps/portal/src/app/(app)/(home)/[orgId]/components/video/YoutubeEmbed.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from '@comp/ui/button';
 import type { EmployeeTrainingVideoCompletion } from '@db';
-import { ArrowRight, Check } from 'lucide-react';
+import { ArrowRight, Check, Loader2 } from 'lucide-react';
 import { useState } from 'react';
 
 // Define our own TrainingVideo interface since we can't find the import
@@ -26,6 +26,7 @@ interface YoutubeEmbedProps {
   onComplete: () => void;
   onNext?: () => void;
   allVideosCompleted: boolean;
+  isMarkingComplete: boolean;
   onWatchAgain: () => void;
 }
 
@@ -35,6 +36,7 @@ export function YoutubeEmbed({
   onComplete,
   onNext,
   allVideosCompleted,
+  isMarkingComplete,
   onWatchAgain,
 }: YoutubeEmbedProps) {
   const [isRewatching, setIsRewatching] = useState(false);
@@ -53,8 +55,17 @@ export function YoutubeEmbed({
             disabled={isCompleted}
             className="gap-2"
           >
-            <Check className="h-4 w-4" />
-            {isCompleted ? 'Completed' : 'Mark as Complete'}
+            {isMarkingComplete ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Marking as Complete...
+              </>
+            ) : (
+              <>
+                <Check className="h-4 w-4" />
+                {isCompleted ? 'Completed' : 'Mark as Complete'}
+              </>
+            )}
           </Button>
         )}
       </div>