React native – Nuxt Vue3 loading animation when first open website till everything is fetched

I’m building a website and I’m fetching some data in some scroll components but I want a loading screen when someone opens the website till everything is done so they won’t load one by one (the page doesn’t look great with empty spaces and I don’t really want to use placeholders also showing multiple loading animations for each scroll component doesn’t look nice).

Like: Enter Website — Show a full page animation (like my logo in the middle of the page and a loading animation) — API loaded everything — enter Main Page.

It loads pretty fast the way I did it now but I’m not even sure if I should call initGetBooks() in onMounted or not (or if it’s a good practice the way I did it), when I did call in onMounted it was too slow for my like. I am a bit noob on this, I have some experience with react-native.

I am using this to fetch data atm:

// composables/useAPIFetch.ts

import axios from 'axios'

export const useAPIFetch = () => {
  const baseURL = 'http://localhost:2222'
 // const storeUser = useStoreUser()
  const token = 'sometoken'
  
  return axios.create({
    baseURL,
   // mode: 'no-cors',
    headers: {
      Authorization: `Bearer ${token}`,
    }
  })
}

// components/Latest.vue
--- ...
                <div data-slide-recent @scroll="initScroll()" class="flex items-stretch gap-5 overflow-hidden overflow-x-auto invisible-scroll">
                    <template v-for="book in books">
                        <div class="w-11/12 min-w-[91.666667%] xs:w-80 xs:min-w-[20rem] md:w-1/3 md:min-w-[33.333333%] lg:w-1/4 lg:min-w-[25%]">
                            <CardsRecentPod :key="book.id" :title="book.media.metadata.title ? `${book.media.metadata.title} - ${book.media.metadata.authorName}` : ''" :duration="secondsToHoursAndMinutes(book.media.duration)" :href="'http://localhost:3333/item/' + book.id" :cover-image="book.media.coverPath ? 'http://localhost:3333/api/items/' + book.id + '/cover?token=sometoken' : 'http://localhost:2222/placeholder_cover.jpg'" />
                        </div>
                    </template>
</div>
----- ...
<script lang="ts" setup >
const api = useAPIFetch(
const books = ref<any[]>([]);

async function initGetBooks(): Promise<void> {
    const { data: libInfo } = await api({
        method: 'post',
        url: '/api/authorize'
    })

    const { data: booksInfo } = await api({
        method: 'get',
        url: '/api/libraries/' + libInfo.userDefaultLibraryId + '/items?limit=8&sort=addedAt&desc=1'
    })
    books.value = booksInfo.results
}


let element: HTMLDivElement
if (typeof document !== "undefined") {
    element = document.querySelector("[data-slide-recent]") as HTMLDivElement
}
async function initScroll(this: any): Promise<void> {
    if (typeof element === "undefined" || element === null) {
        return
    }

    prevIsVisible.value = element.scrollLeft <= 0 ? false : true
    nextIsVisible.value = element.scrollLeft >= element.scrollWidth - element.offsetWidth - 1 ? false : true
}

function scrollToLeft(): void {
    if (typeof element === "undefined" || element === null) {
        return
    }
    element.scrollLeft -= element.clientWidth
}

function scrollToRight(): void {
    if (typeof element === "undefined" || element === null) {
        return
    }
    element.scrollLeft += element.clientWidth
}

await initGetBooks()

onMounted(() => {
    if (window !== null) {
        initScroll()
    }
})

</script>

Any advice is greatly appreciated.

I tried playing with NuxtLoadingIndicator and some stuff but no luck.