feat: navigate to next/previous lesson (#352)

* prev and next button logic in place

* handled the edge case

* done

* updated the transation and the navigating function

* cleanup

* ease in animation, simplify disabled logic, avoid quick loader < 1s load time

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/ComponentNote.svelte

@@ -15,7 +15,7 @@
     $lessonByTranslation[lessonId],
     $lesson.locale
   );
-  $: hasAtLeastOneTranslation = Object.values($lessonByTranslation[lessonId]).some(
+  $: hasAtLeastOneTranslation = Object.values($lessonByTranslation[lessonId] || {}).some(
     (c) => !!c.length
   );
 </script>

apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import isEmpty from 'lodash/isEmpty';
+  import { fade } from 'svelte/transition';
   import { useCompletion } from 'ai/svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -477,11 +478,13 @@
     </slot:fragment>
   </Tabs>
 {:else if !isMaterialsEmpty($lesson.materials, $lessonByTranslation[lessonId])}
-  <div class="w-full">
-    {#each componentsToRender as Component}
-      <svelte:component this={Component} {lessonId} />
-    {/each}
-  </div>
+  {#key lessonId}
+    <div class="w-full" in:fade={{ delay: 500 }} out:fade>
+      {#each componentsToRender as Component}
+        <svelte:component this={Component} {lessonId} />
+      {/each}
+    </div>
+  {/key}
 {:else}
   <Box className="text-center">
     <img src="/no-video.svg" alt="Video not found" />