diff --git a/server/ctrl/static.go b/server/ctrl/static.go index 90057a0e..d5a66398 100644 --- a/server/ctrl/static.go +++ b/server/ctrl/static.go @@ -23,11 +23,15 @@ import ( var ( WWWDir fs.FS + //go:embed static/www WWWEmbed embed.FS //go:embed static/404.html HtmlPage404 []byte + + //go:embed static/loader.html + TmplLoader []byte ) func init() { @@ -441,7 +445,10 @@ func ServeIndex(indexPath string) func(*App, http.ResponseWriter, *http.Request) } head.Set("Content-Type", "text/html") res.WriteHeader(http.StatusOK) - template.Must(template.New(indexPath).Parse(string(b))).Execute(res, map[string]any{ + + tmpl := template.Must(template.New(indexPath).Parse(string(b))) + tmpl = template.Must(tmpl.Parse(string(TmplLoader))) + tmpl.Execute(res, map[string]any{ "base": WithBase("/"), "version": BUILD_REF, "license": LICENSE, diff --git a/server/ctrl/static/loader.html b/server/ctrl/static/loader.html new file mode 100644 index 00000000..bc3c4bd5 --- /dev/null +++ b/server/ctrl/static/loader.html @@ -0,0 +1,200 @@ +{{ define "loader-cat" }} +class ComponentBootScreen extends HTMLElement { + connectedCallback() { + this.innerHTML = this.render(); + this.timeout = setTimeout(function(){ + const $rbw = document.querySelector("#rbw .w"); + $rbw.innerHTML = $rbw.innerHTML.repeat(10); + + const $loader = document.querySelector("#n-lder"); + $loader.classList.add("loading"); + }, 500); + } + + disconnectedCallback() { + clearTimeout(this.timeout); + } + + render() { + return ` + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; + } +} +customElements.define("component-bootscreen", ComponentBootScreen); +{{ end }} +{{ define "loader-basic" }} +class ComponentBootScreen extends HTMLElement { + connectedCallback() { + this.innerHTML = `
+ + + + + + + + + + + + +
`; + } +} +customElements.define("component-bootscreen", ComponentBootScreen); +{{ end }}