Vue.js SPAで、初回ローディング時にローディング画面を出す方法

前提・実現したいこと

現在vue3とwebpackを使用してアプリケーションを開発しております。
俗にいうSPAアプリケーションなのですが、どうしても最初のローディング時に時間がかかってしまうため、初回ローディング時にローディング画面を表示させたいのですが、そういったことは可能でしょうか？
※vue-cliは使用しておりません

発生している問題

ローディング画面について調べると、初回ローディング後の非同期通信の際などの実装方法が多く、初回ローディング時にローディング画面を表示させる方法を調べることができませんでした。
そもそも、その様な事が可能なのかもわかっておりません。

初心者エンジニアで、初めによくわかってない状態からスタートしてしまい、想像以上に初回ローディングに時間がかかってしまいSPAにしたことを少し後悔しています...
その後nuxt.jsというものを知り、SSRという手段をしりましたが、現在(2021年7月2日時点)ではvue3に対応しておらず、私が作成しているシステムはvue3とvuex4を使用しており、移行のコストが高すぎて、なんとか現在のSPAにローディング画面を表示してしのぎ、nuxt3が使えるようになった時点での移行を考えております。

なにとぞよろしくお願い致します。

※バンドルしたjsを読み込んでいるHTML

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
6    </head>
7    <body>
8        <div id="app"></div>
9        <script src="bundle.js"></script>
10    </body>
11</html>