From 34ef30dd5c511475916f3a6b541d678ec6293f1b Mon Sep 17 00:00:00 2001
From: tomasz1986 <twilczynski@naver.com>
Date: Wed, 3 Jan 2024 12:37:51 +0100
Subject: [PATCH] gui: Always inform about loading data in Restore Versions
 modal (#9317)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, with a large number of versioned files, there is a delay
between the Restore Versions modal showing up on the screen and
initialisation of the actual versions tree. This leads to a situation,
where the modal is initially empty, which confuses the user, making
them think that something is not working correctly.

To avoid the above, always show the loading data information. The string
is displayed using static HTML first, and then replaced with the exact
same content once the tree has been initialised. Both elements use the
same style and position, so there is no visual shift between the two.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
---
 gui/default/syncthing/folder/restoreVersionsModalView.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/gui/default/syncthing/folder/restoreVersionsModalView.html b/gui/default/syncthing/folder/restoreVersionsModalView.html
index bde8e49a6..39e8f50ad 100644
--- a/gui/default/syncthing/folder/restoreVersionsModalView.html
+++ b/gui/default/syncthing/folder/restoreVersionsModalView.html
@@ -1,5 +1,11 @@
 <modal id="restoreVersions" status="default" icon="fas fa-undo" heading="{{'Restore Versions' | translate}} ({{folderLabel(restoreVersions.folder)}})" large="yes" closeable="yes">
   <div class="modal-body">
+    <!--
+    Inform the user about loading data even before the tree is initialised
+    to avoid confusion where nothing is displayed on the screen for a while.
+    Ref: https://forum.syncthing.net/t/reversed-date-in-search-filter/21369/3
+    -->
+    <div ng-if="!restoreVersions.versions" translate>Loading data...</div>
     <div ng-if="restoreVersions.versions && !restoreVersions.errors">
       <div id="restoreTree-container">
         <table id="restoreTree">