Moving next should be mark it as done

src/components/GenerateCourse/AICourseLesson.tsx

@@ -334,9 +334,20 @@ export function AICourseLesson(props: AICourseLessonProps) {
             Previous <span className="hidden lg:inline">&nbsp;Lesson</span>
           </button>
 
+          <div>
             <button
-            onClick={onGoToNextLesson}
+              onClick={() => {
-            disabled={cantGoForward}
+                if (!isLessonDone) {
+                  toggleDone(undefined, {
+                    onSuccess: () => {
+                      onGoToNextLesson();
+                    },
+                  });
+                } else {
+                  onGoToNextLesson();
+                }
+              }}
+              disabled={cantGoForward || isTogglingDone}
               className={cn(
                 'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
                 cantGoForward
@@ -344,11 +355,25 @@ export function AICourseLesson(props: AICourseLessonProps) {
                   : 'bg-gray-800 text-white hover:bg-gray-700',
               )}
             >
+              {isTogglingDone ? (
+                <>
+                  <Loader2Icon
+                    size={16}
+                    strokeWidth={3}
+                    className="animate-spin text-white"
+                  />
+                  Please wait ...
+                </>
+              ) : (
+                <>
                   Next <span className="hidden lg:inline">&nbsp;Lesson</span>
                   <ChevronRight size={16} className="ml-2" />
+                </>
+              )}
             </button>
           </div>
         </div>
+      </div>
 
       {!isGenerating && !isLoading && (
         <AICourseFollowUp