diff --git a/client/css/style.css b/client/css/style.css index a4a4a397..215d1b24 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -160,6 +160,7 @@ kbd { } #js-copy-hack, +#loading pre, #help, #windows .header .title, #windows .header .topic, @@ -1354,10 +1355,24 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ margin-top: 10px; } -#loading-slow { +#loading-slow, +#loading-reload { display: none; } +#loading-reload { + margin-top: 15px; +} + +#loading summary { + outline: none; + cursor: pointer; +} + +#loading pre { + white-space: normal; +} + #sign-in label { display: block; margin-top: 10px; diff --git a/client/index.html b/client/index.html index dd0bd3f9..bfc61872 100644 --- a/client/index.html +++ b/client/index.html @@ -53,10 +53,11 @@

Loading the app… Make sure to have JavaScript enabled.

-
-

This is taking longer than it should, there might be connectivity issues.

- -
+

+ This is taking longer than it should, there might be + connectivity issues. +

+
diff --git a/client/js/loading-slow-alert.js b/client/js/loading-slow-alert.js index 2eb990dd..8ece9ead 100644 --- a/client/js/loading-slow-alert.js +++ b/client/js/loading-slow-alert.js @@ -8,40 +8,54 @@ * so that the timeout can be triggered while slow JS is loading */ -setTimeout(function() { - var element = document.getElementById("loading-slow"); +function displayReload() { + var loadingReload = document.getElementById("loading-reload"); + if (loadingReload) { + loadingReload.style.display = "block"; + } +} - if (element) { - element.style.display = "block"; +var loadingSlowTimeout = setTimeout(function() { + var loadingSlow = document.getElementById("loading-slow"); + + // The parent element, #loading, is being removed when the app is loaded. + // Since the timer is not cancelled, `loadingSlow` can be not found after + // 5s. Wrap everything in this block to make sure nothing happens if the + // element does not exist (i.e. page has loaded). + if (loadingSlow) { + loadingSlow.style.display = "block"; + displayReload(); } }, 5000); -document.getElementById("loading-slow-reload").addEventListener("click", function() { +document.getElementById("loading-reload").addEventListener("click", function() { location.reload(); }); -window.g_LoungeErrorHandler = function LoungeErrorHandler(error) { +window.g_LoungeErrorHandler = function LoungeErrorHandler(e) { var title = document.getElementById("loading-title"); title.textContent = "An error has occured"; - title = document.getElementById("loading-page-message"); - title.textContent = "An error has occured that prevented the client from loading correctly."; + var message = document.getElementById("loading-page-message"); + message.textContent = "An error has occured that prevented the client from loading correctly."; var summary = document.createElement("summary"); summary.textContent = "More details"; - if (error instanceof ErrorEvent) { - error = error.message + "\n\n" + error.stack + "\n\nView developer tools console for more information and a better stacktrace."; - } - var data = document.createElement("pre"); - data.contentEditable = true; - data.textContent = error; + data.textContent = e.message; // e is an ErrorEvent + + var info = document.createElement("p"); + info.textContent = "Open the developer tools of your browser for more information."; var details = document.createElement("details"); details.appendChild(summary); details.appendChild(data); - title.parentNode.insertBefore(details, title.nextSibling); + details.appendChild(info); + message.parentNode.insertBefore(details, message.nextSibling); + + window.clearTimeout(loadingSlowTimeout); + displayReload(); }; window.addEventListener("error", window.g_LoungeErrorHandler);