frontend: delay fullpage init after post fetch

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/stores/posts.js

@@ -11,7 +11,7 @@ export const usePostsStore = defineStore('posts', () => {
   const posts = ref([])
 
   function fetchPosts() {
-    fetch(postsApiPath)
+    return fetch(postsApiPath)
       .then((response) => {
         return response.json()
       })
@@ -28,7 +28,5 @@ export const usePostsStore = defineStore('posts', () => {
       })
   }
 
-  fetchPosts()
-
-  return { posts }
+  return { posts, fetchPosts }
 })

summer2024-frontend/src/views/PostsView.vue

@@ -1,7 +1,7 @@
 <script setup>
 import PostComponent from '@/components/PostComponent.vue'
 import { usePostsStore } from '@/stores/posts.js'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import WelcomeComponent from '@/components/WelcomeComponent.vue'
 
 const postsStore = usePostsStore()
@@ -18,6 +18,18 @@ const fullpageOptions = ref({
   credits: { enabled: false }
 })
 const menu = ref(null)
+let fullPageInit = false;
+
+onMounted(() => {
+  postsStore.fetchPosts().then(() => {
+    if (!fullPageInit) {
+      fullpage.value.init();
+      fullPageInit = true;
+    } else {
+      fullpage.value.build();
+    }
+  });
+})
 
 function onLeave(origin, destination, direction, trigger) {
   if (destination.anchor === 'welcome-section') {
@@ -55,6 +67,7 @@ function afterLoad(origin, destination, direction, trigger) {
     :options="fullpageOptions"
     @on-leave="onLeave"
     @after-load="afterLoad"
+    :skip-init="true"
   >
     <WelcomeComponent />
     <PostComponent class="section" v-for="post in postsStore.posts" :key="post.id" :post="post" />