From c7e86c9dbb2b0e746dd2b4835c7aa1b947e41c95 Mon Sep 17 00:00:00 2001 From: Naman Pahwa Date: Fri, 28 Feb 2025 14:05:40 +0530 Subject: [PATCH] Show spinner while loading ZIM content in viewer iframe - Implemented a spinner to improve user experience while ZIM content is loading in the viewer iframe. - Added .loader and .spinner styles in kiwix.css. - The iframe content is initially hidden (visibility: hidden) and will be displayed once loading completes. - Used CSS animations (@keyframes spin) for a smooth rotating effect. --- static/skin/i18n/en.json | 1 + static/skin/i18n/qqq.json | 3 ++- static/skin/i18n/test.json | 1 + static/skin/kiwix.css | 34 ++++++++++++++++++++++++++++++++++ static/skin/viewer.js | 10 ++++++++++ static/viewer.html | 6 +++++- test/library_server.cpp | 2 +- test/server.cpp | 10 +++++----- 8 files changed, 59 insertions(+), 8 deletions(-) diff --git a/static/skin/i18n/en.json b/static/skin/i18n/en.json index 7add683c..09ca32d1 100644 --- a/static/skin/i18n/en.json +++ b/static/skin/i18n/en.json @@ -78,4 +78,5 @@ , "book-category.wikivoyage": "Wikivoyage" , "book-category.wiktionary": "Wiktionary" , "book-category.other": "Other" + , "text-loading-content": "Loading Content" } diff --git a/static/skin/i18n/qqq.json b/static/skin/i18n/qqq.json index f41c5d7a..6ddc1453 100644 --- a/static/skin/i18n/qqq.json +++ b/static/skin/i18n/qqq.json @@ -80,5 +80,6 @@ "book-category.wikiversity": "Name for the category of Wikiversity books", "book-category.wikivoyage": "Name for the category of Wikivoyage books", "book-category.wiktionary": "Name for the category of Wiktionary books", - "book-category.other": "Books not belonging to any special category are listed under this one" + "book-category.other": "Books not belonging to any special category are listed under this one", + "text-loading-content": "Text displayed while content is being loaded" } diff --git a/static/skin/i18n/test.json b/static/skin/i18n/test.json index f997ef5e..bdde1272 100644 --- a/static/skin/i18n/test.json +++ b/static/skin/i18n/test.json @@ -65,4 +65,5 @@ , "book-category.wikivoyage": "[I18N] Wikivoyage [TESTING]" , "book-category.wiktionary": "[I18N] Wiktionary [TESTING]" , "book-category.other": "[I18N] Other [TESTING]" + , "text-loading-content": "[I18N TESTING] Loading content" } diff --git a/static/skin/kiwix.css b/static/skin/kiwix.css index 2a702ff2..5a92b07c 100644 --- a/static/skin/kiwix.css +++ b/static/skin/kiwix.css @@ -15,6 +15,35 @@ body { box-sizing: border-box; } +.loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + background: rgba(255, 255, 255, 0.8); + padding: 10px 20px; + border-radius: 5px; + display: flex; + align-items: center; + gap: 10px; + white-space: nowrap; /* Prevents text from wrapping */ + min-width: fit-content; /* Ensures the container doesn’t shrink */ +} + +.spinner { + width: 20px; + height: 20px; + border: 3px solid #ccc; + border-top: 3px solid #007bff; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +.hidden { + visibility: hidden; +} + ::selection { background-color: #00b4e4; color: white; @@ -96,6 +125,11 @@ body { height: 30px; } +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + @font-face { font-family: "poppins"; src: url("../skin/fonts/Poppins.ttf?KIWIXCACHEID") format("truetype"); diff --git a/static/skin/viewer.js b/static/skin/viewer.js index 75be6dc1..bbdbc74d 100644 --- a/static/skin/viewer.js +++ b/static/skin/viewer.js @@ -424,6 +424,10 @@ function setup_external_link_blocker() { let viewerSetupComplete = false; function on_content_load() { + const loader = document.getElementById("kiwix__loader"); + + contentIframe.classList.remove("hidden"); + loader.style.display = "none"; if ( viewerSetupComplete ) { handle_content_url_change(); } @@ -612,6 +616,12 @@ function updateUIText() { setTitle(document.getElementById("kiwix_serve_taskbar_random_button"), $t("random-page-button-text")); + + // Add translation for loading text as soon as translations are available + const loadingTextElement = document.getElementById("kiwix__loading_text"); + if (loadingTextElement) { + loadingTextElement.textContent = $t("text-loading-content"); + } } function finishViewerSetupOnceTranslationsAreLoaded() diff --git a/static/viewer.html b/static/viewer.html index bc547860..59a17e89 100644 --- a/static/viewer.html +++ b/static/viewer.html @@ -33,6 +33,10 @@ +
+ + Loading content... +