Wait for Vue to finish loading before showing HTML

This prevents flashing static HTML elements (icons, modals) on reload.
This commit is contained in:
Anton Grouchtchak 2022-05-18 17:14:05 -04:00 committed by GitHub
parent bbd19b7a6f
commit b146ba1d86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 3 deletions

View File

@ -10,12 +10,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
<style>
[v-cloak] {
display: none;
}
</style>
<body class="bg-gray-50"> <body class="bg-gray-50">
<div id="app"> <div id="app">
<div class="container mx-auto max-w-3xl"> <div v-cloak class="container mx-auto max-w-3xl">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<span v-if="requiresPassword" <span v-if="requiresPassword"
@ -465,7 +471,7 @@
</div> </div>
<p class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline" <p v-cloak class="text-center m-10 text-gray-300 text-xs">Made by <a target="_blank" class="hover:underline"
href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline" href="https://emilenijssen.nl/?ref=wg-easy">Emile Nijssen</a> · <a class="hover:underline"
href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline" href="https://github.com/sponsors/WeeJeWel" target="_blank">Donate</a> · <a class="hover:underline"
href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p> href="https://github.com/weejewel/wg-easy" target="_blank">GitHub</a></p>
@ -482,4 +488,4 @@
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
</body> </body>
</html> </html>