Fixed page loading

1 files changed, 31 insertions, 18 deletions

diff --git a/assets/js/main.js b/assets/js/main.js
index bcd6af6..5da93ed 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,5 +1,10 @@
 class Main {
-    constructor() {}
+    constructor() {
+        this.object = {
+            head: document.getElementsByTagName('head')[0],
+            body: document.getElementsByTagName('body')[0]
+        }
+    }
 
     async Init() {
         await this.Get()
@@ -7,7 +12,7 @@ class Main {
 
     #Loading() {}
     async Get(x) {
-        this.object = {
+        const object = {
             session: document.cookie,
             url: window.location.href
         }
@@ -16,33 +21,41 @@ class Main {
 
         await fetch(this.fetch, {
             method: 'post',
-            body: JSON.stringify(this.object),
+            body: JSON.stringify(object),
             headers: new Headers({
                 'Content-Type': 'application/json'
             })
         })
             .then(res => res.json())
             .then(output => {
-                const head = document.getElementsByTagName('head')[0]
-                const body = document.getElementsByTagName('body')[0]
+                this.output = output
                 const section = document.getElementById('main')
 
-                for (let i = 0; i < output.css.length; i++) {
-                    const link = document.createElement('link')
-                    link.rel = 'stylesheet'
-                    link.type = 'text/css'
-                    link.href = `${window.location.origin}/css/${output.css[i]}`
-                    head.appendChild(link)
-                }
-                for (let i = 0; i < output.js.length; i++) {
-                    const script = document.createElement('script')
-                    script.src = `${window.location.origin}/js/${output.js[i]}`
-                    body.appendChild(script)
-                }
+                this.#LoadCSS(output.css).then(output => {
+                    section.innerHTML = DOMPurify.sanitize(this.output.html)
+                    this.output.js.map(file => {
+                        const script = document.createElement('script')
+                        script.src = `${window.location.origin}/js/${file}`
+                        this.object.body.appendChild(script)
+                    })
+                })
 
-                section.innerHTML = DOMPurify.sanitize(output.html)
+                //section.innerHTML = DOMPurify.sanitize(output.html)
             })
     }
+    async #LoadCSS (files) {
+        const promises = files.map(file => {
+            return new Promise(res => {
+                const link = document.createElement('link')
+                link.rel = 'stylesheet'
+                link.type = 'text/css'
+                link.href = `${window.location.origin}/css/${file}`
+                this.object.head.appendChild(link)
+                link.onload = res
+            })
+        })
+        return Promise.all(promises)
+    }
 }
 
 new Main().Init()