fix: vue loading issues

cmd/doggo/api/assets/main.js

@@ -1,95 +1,92 @@
-var app;
+var app = new Vue({
-window.addEventListener('DOMContentLoaded', (event) => {
+    el: '#app',
-    app = new Vue({
+    data: {
-        el: '#app',
+        apiURL: "/api/lookup/",
-        data: {
+        results: [],
-            apiURL: "/api/lookup/",
+        noRecordsFound: false,
-            results: [],
+        emptyNameError: false,
-            noRecordsFound: false,
+        apiErrorMessage: "",
-            emptyNameError: false,
+        queryName: "",
-            apiErrorMessage: "",
+        queryType: "A",
-            queryName: "",
+        nameserverName: "google",
-            queryType: "A",
+        customNSAddr: "",
-            nameserverName: "google",
+        nsAddrMap: {
-            customNSAddr: "",
+            "google": "8.8.8.8",
-            nsAddrMap: {
+            "cloudflare": "1.1.1.1",
-                "google": "8.8.8.8",
+            "quad9": "9.9.9.9",
-                "cloudflare": "1.1.1.1",
-                "quad9": "9.9.9.9",
-            }
-        },
-        created: function () {
-        },
-        computed: {
-            getNSAddrValue() {
-                return this.nsAddrMap[this.nameserverName]
-            },
-            isCustomNS() {
-                if (this.nameserverName == "custom") {
-                    return true
-                }
-                return false
-            }
-        },
-        methods: {
-            prepareNS() {
-                switch (this.nameserverName) {
-                    case "google":
-                        return "tcp://8.8.8.8:53"
-                    case "cloudflare":
-                        return "tcp://1.1.1.1:53"
-                    case "quad9":
-                        return "tcp://9.9.9.9:53"
-                    case "custom":
-                        return this.customNSAddr
-                    default:
-                        return ""
-                }
-            },
-            lookupRecords() {
-                // reset variables.
-                this.results = []
-                this.noRecordsFound = false
-                this.emptyNameError = false
-                this.apiErrorMessage = ""
-
-                if (this.queryName == "") {
-                    this.emptyNameError = true
-                    return
-                }
-
-                // GET request using fetch with error handling
-                fetch(this.apiURL, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        query: [this.queryName,],
-                        type: [this.queryType,],
-                        nameservers: [this.prepareNS(),],
-                    }),
-                }).then(async response => {
-                    const res = await response.json();
-
-                    // check for error response
-                    if (!response.ok) {
-                        // get error message from body or default to response statusText
-                        const error = (res && res.message) || response.statusText;
-                        return Promise.reject(error);
-                    }
-
-                    if (res.data[0].answers == null) {
-                        this.noRecordsFound = true
-                    } else {
-                        // Set the answers in the results list.
-                        this.results = res.data[0].answers
-                    }
-
-                }).catch(error => {
-                    this.apiErrorMessage = error
-                });
-            }
         }
-    })
+    },
+    created: function () {
+    },
+    computed: {
+        getNSAddrValue() {
+            return this.nsAddrMap[this.nameserverName]
+        },
+        isCustomNS() {
+            if (this.nameserverName == "custom") {
+                return true
+            }
+            return false
+        }
+    },
+    methods: {
+        prepareNS() {
+            switch (this.nameserverName) {
+                case "google":
+                    return "tcp://8.8.8.8:53"
+                case "cloudflare":
+                    return "tcp://1.1.1.1:53"
+                case "quad9":
+                    return "tcp://9.9.9.9:53"
+                case "custom":
+                    return this.customNSAddr
+                default:
+                    return ""
+            }
+        },
+        lookupRecords() {
+            // reset variables.
+            this.results = []
+            this.noRecordsFound = false
+            this.emptyNameError = false
+            this.apiErrorMessage = ""
+
+            if (this.queryName == "") {
+                this.emptyNameError = true
+                return
+            }
+
+            // GET request using fetch with error handling
+            fetch(this.apiURL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    query: [this.queryName,],
+                    type: [this.queryType,],
+                    nameservers: [this.prepareNS(),],
+                }),
+            }).then(async response => {
+                const res = await response.json();
+
+                // check for error response
+                if (!response.ok) {
+                    // get error message from body or default to response statusText
+                    const error = (res && res.message) || response.statusText;
+                    return Promise.reject(error);
+                }
+
+                if (res.data[0].answers == null) {
+                    this.noRecordsFound = true
+                } else {
+                    // Set the answers in the results list.
+                    this.results = res.data[0].answers
+                }
+
+            }).catch(error => {
+                this.apiErrorMessage = error
+            });
+        }
+    }
 })

cmd/doggo/api/index.html

@@ -5,17 +5,29 @@
     <title>Doggo DNS</title>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
+
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
+
+    <style>
+        [v-cloak]>* {
+            display: none;
+        }
+
+        /* [v-cloak]::before {
+            content: "loading...";
+        } */
+
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+    </style>
+
 </head>
 
-<style>
-    body {
-        font-family: 'Poppins', sans-serif;
-    }
-</style>
 <noscript>
     <div class="noscript">
         <h2>This service requires Javascript</h2>
@@ -27,7 +39,7 @@
     <header class="mt-10">
         <h1 class="text-5xl font-black text-center"><span class="text-indigo-700">Doggo</span> DNS</h1>
     </header>
-    <main id="app" class="main flex flex-col flex-grow">
+    <main id="app" v-cloak class="main flex flex-col flex-grow">
         <form @submit.prevent="lookupRecords">
             <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
                 <div class="-mx-3 md:flex mb-6">