[Javascript Vue] Improve heavy component loading performance

Let's say we have a Vue application that renders many heavy components on the first load. The problem we're facing is a long white screen period while JavaScript is loading and the browser is painting.

How can we optimize performance?

Since the page size is limited, we should only render what's visible to the user during the first load and defer the rendering of other components. This way, the user perceives the application as loading faster.

import {onUnmounted, ref} from 'vue'

export function useDefer(maxCount = 100) {
    const frameCount = ref(0)
    let refId;
    function updateFrameCount() {
        refId = requestAnimationFrame(() => {
            frameCount.value++;
            if (frameCount.value >= maxCount) {
                return;
            }
            updateFrameCount();
        });
    }
    updateFrameCount();
    onUnmounted(() => {
        cancelAnimationFrame(refId)
    })
    return function defer(n) {
        // return true then component should be renderered.
        // return false then not.
        return frameCount.value >= n;
    }
}

<template>
    <div class="container">
        <div v-for="n in 100">
            <heavy-comp v-if="defer(n)"></heavy-comp>
        </div>
    </div>
</template>