The problem occur when I load pages that takes longer to load. In my case this sites loads 5000 records from the database and it take longer time before all content is loaded.
My intention is to use several themes that is applied dynamically. But when doing this, the theme is not loaded until all contents are loaded, causing annoying “flickering”.
1. The static approach without flickering
When I apply the theme at root level and “static”, there is no flickering, but a delay in updating the selected button. <html data-theme="classic" lang="en"> http://94.237.92.101:2020/topics
2. The dynamic approach with flickering
When I apply the theme at body level and “on-the-fly”, there is a annoying flickering.
<body data-theme="classic">
window.addEventListener("DOMContentLoaded", (event) => {
document.body.dataset.theme = localStorage.theme
if (localStorage.theme) {
do nothing
} else {
window.localStorage.setItem('theme', "classic")
window.location.reload()
}
})
Why are you loading 5000 records from the database? Your example seems to be a forum page. If that’s true, my suggestion is to not load 5000 records at one time. Maybe load the top 100 (even that sounds like overkill to me) and then put a search to let people narrow it down.
To show the flicker = the problem.
If a page loads slow of an other reason, it will flicker. So I want to find methods that works asynchronously in order to improve the load speed.
window.addEventListener in your second dynamic approach is JavaScript.
I don’t quite understand what you mean by ‘load data in a Go template asynchronously’. Go is running on the server, it returns the result of template expansion completely rendered. It sends this completed result to the client which does whatever it wants with it.
So if there is any flickering in the client, there is nothing that can be done about it on the server.
No, this is JavaScript executed in the browser, not Go or any other code executed on the server.
The client JavaScript code basically makes a HTTP GET request for an XML file ( xhttp.open("GET", "cd_catalog.xml", true);). This request is executed asynchronously in the browser which means you can interact with the HTML web site even while the XML file is requested. As soon as the HTTP GET request is finished and the complete XML file is loaded, it is parsed in the JavaScript function myFunction and an HTML table is added to the existing HTML.
The important point is that all this is done in the browser. The server that is serving the XML file does not care. It receives the HTTP GET request for it and returns it. Maybe this file already exists somewhere on the disk of the server or it is read from a database. Maybe the file is constructed on the fly and maybe even Go templates are used for this construction. All this this invisible to the browser waiting for the response of the HTTP GET request. As soon as the server is done doing whatever it is doing, it returns the complete XML file and this is it.
So every flicker or error you observe in the HTML of the web page must be dealt with in the JavaScript code that is inserting the HTML table into the existing HTML.
No, this is Go code executed on the server which is rendering static HTML as far as the browser is concerned.
In the tutorial you’ve linked to, this is JavaScript code that is inserting HTML elements after an asynchronous request made above using AJAX:
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
Maybe you should show us a minimal but complete example of both the server-side Go code and the client-side HTML and JavaScript you use.
