From a0610dbb0e625fa65e63c32eafabf1e0d73e8834 Mon Sep 17 00:00:00 2001
From: Maryna Balioura <mettta@gmail.com>
Date: Thu, 7 Dec 2023 01:08:14 +0100
Subject: [PATCH] export/html: DIFF: improve preloader, add spinner ; rename
 preloading template

---
 strictdoc/export/html/_static/diff.css        | 120 +++++++++++++++++-
 ...frame_content.jinja => frame_result.jinja} |   2 +-
 .../html/templates/screens/git/main.jinja     |  53 +-------
 .../html/templates/screens/git/skeleton.jinja |  41 ++++++
 strictdoc/server/routers/other_router.py      |   2 +-
 5 files changed, 158 insertions(+), 60 deletions(-)
 rename strictdoc/export/html/templates/screens/git/{frame_content.jinja => frame_result.jinja} (96%)
 create mode 100644 strictdoc/export/html/templates/screens/git/skeleton.jinja

diff --git a/strictdoc/export/html/_static/diff.css b/strictdoc/export/html/_static/diff.css
index 6b91153e7..3e11a595f 100644
--- a/strictdoc/export/html/_static/diff.css
+++ b/strictdoc/export/html/_static/diff.css
@@ -296,25 +296,69 @@ details.diff_document[modified="right"] {
 }
 .lambda_green {background-color: var(--diff-word-color-right);}
 
+/* preloaded */
+/*
+  The element has been pre-loaded
+  and a smooth appearance effect is added to it.
+  The element will retain the computed values set by the last keyframe.
+ */
+.preloaded {
+  position: relative;
+  animation: fadeInPreloaded 1s ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInPreloaded {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 /* skeleton */
 
+.diff_skeleton_spinner_container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  grid-column: 1/3;
+  grid-row: 2/3;
+  z-index: 11;
+}
+
 .skeleton.diff {
-  margin-top:40px;
-  border-color:white"
+  position: relative;
+  color: var(--color-fg-accent);
+}
+
+.skeleton.diff .diff_2columns {
+  grid-column: 1 / -1;
+  height: 32px;
+  text-align: center;
 }
 
 .skeleton.diff .diff_column {
-  border-color:white
+  border-color: white;
 }
 
 .skeleton.diff .item_ {
   width: 200px;
-  padding:16px; margin:8px; border-radius: 4px;
+  padding: 16px;
+  margin: 8px;
+  border-radius: 4px;
 }
 
 .skeleton.diff .item {
-  padding:16px;
-  margin:8px;
+  padding: 16px;
+  margin: 8px;
   border-radius: 4px;
   background-color: rgba(255,255,255,1);
   /* animation-name: change-color; */
@@ -335,3 +379,67 @@ details.diff_document[modified="right"] {
     opacity: 1;
   }
 }
+
+.skeleton_spinner {
+  position: relative;
+  text-indent: -9999em;
+  animation: mulShdSpin 1.3s infinite linear;
+  transform: translateZ(0);
+  /* size */
+  font-size: 8px;
+  margin: 36px;
+  /* dot */
+  color: var(--color-fg-accent);
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+}
+
+@keyframes mulShdSpin {
+  0%,
+  100% {
+    box-shadow: 0 -3em 0 0.2em,
+    2em -2em 0 0em, 3em 0 0 -1em,
+    2em 2em 0 -1em, 0 3em 0 -1em,
+    -2em 2em 0 -1em, -3em 0 0 -1em,
+    -2em -2em 0 0;
+  }
+  12.5% {
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+    3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+    -2em 2em 0 -1em, -3em 0 0 -1em,
+    -2em -2em 0 -1em;
+  }
+  25% {
+    box-shadow: 0 -3em 0 -0.5em,
+    2em -2em 0 0, 3em 0 0 0.2em,
+    2em 2em 0 0, 0 3em 0 -1em,
+    -2em 2em 0 -1em, -3em 0 0 -1em,
+    -2em -2em 0 -1em;
+  }
+  37.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+     3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+     -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  50% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+     3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+     -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+  62.5% {
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+     3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+     -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+  75% {
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+    3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+    -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+  87.5% {
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+    3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+    -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
diff --git a/strictdoc/export/html/templates/screens/git/frame_content.jinja b/strictdoc/export/html/templates/screens/git/frame_result.jinja
similarity index 96%
rename from strictdoc/export/html/templates/screens/git/frame_content.jinja
rename to strictdoc/export/html/templates/screens/git/frame_result.jinja
index 1485b6c8a..a8d266e93 100644
--- a/strictdoc/export/html/templates/screens/git/frame_content.jinja
+++ b/strictdoc/export/html/templates/screens/git/frame_result.jinja
@@ -1,6 +1,6 @@
 <turbo-frame id="diff_result">
 {% if results %}
-  <div class="diff" data-controller="diff">
+  <div class="diff preloaded" data-controller="diff">
     <div class="diff_controls" left>
       <a id="diff_left_open" class="action_button"><span>+</span>open all modified</a>
       <a id="diff_left_close" class="action_button"><span>–</span>close all</a>
diff --git a/strictdoc/export/html/templates/screens/git/main.jinja b/strictdoc/export/html/templates/screens/git/main.jinja
index 6ba1f447e..65651fcea 100644
--- a/strictdoc/export/html/templates/screens/git/main.jinja
+++ b/strictdoc/export/html/templates/screens/git/main.jinja
@@ -1,60 +1,9 @@
 <div class="main">
   {% include "screens/git/form.jinja" %}
-  {# {% include "screens/git/frame_content.jinja" %} #}
 
   {% if error_message is none and left_revision is not none and right_revision is not none and left_revision|length > 0 and right_revision|length > 0 %}
     <turbo-frame id="diff_result" src="/diff_result?left_revision={{ left_revision_urlencoded }}&right_revision={{ right_revision_urlencoded }}">
-      {# Content will be replaced when /feed has been loaded. #}
-
-      <div class="diff skeleton">
-        <div class="diff_column" left>
-          <div class="diff_inner" left>
-            <div class="item_"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-
-            <div class="item_"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-
-            <div class="item_"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-
-            <div class="item_"></div>
-          </div>
-        </div>
-        <div class="diff_column" right>
-          <div class="diff_inner" right>
-            <div class="item_"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-
-            <div class="item_"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-
-            <div class="item_"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-            <div class="item"></div>
-
-            <div class="item_"></div>
-          </div>
-        </div>
-      </div>
-
+    {% include "screens/git/skeleton.jinja" %}
     </turbo-frame>
   {% endif %}
 
diff --git a/strictdoc/export/html/templates/screens/git/skeleton.jinja b/strictdoc/export/html/templates/screens/git/skeleton.jinja
new file mode 100644
index 000000000..0942cdc0e
--- /dev/null
+++ b/strictdoc/export/html/templates/screens/git/skeleton.jinja
@@ -0,0 +1,41 @@
+<div class="diff skeleton">
+  <div class="diff_skeleton_spinner_container">
+    <div class="skeleton_spinner"></div>
+    {# <p>It may take a while the first time!</p> #}
+  </div>
+  <div class="diff_2columns">{# button panel simulation #}</div>
+  <div class="diff_column" left>
+    <div class="diff_inner" left>
+      <div class="item_"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+
+      <div class="item_"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+
+      <div class="item_"></div>
+    </div>
+  </div>
+  <div class="diff_column" right>
+    <div class="diff_inner" right>
+      <div class="item_"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+
+      <div class="item_"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+
+      <div class="item_"></div>
+    </div>
+  </div>
+</div>
diff --git a/strictdoc/server/routers/other_router.py b/strictdoc/server/routers/other_router.py
index 7d9efcae2..78ce4966a 100644
--- a/strictdoc/server/routers/other_router.py
+++ b/strictdoc/server/routers/other_router.py
@@ -166,7 +166,7 @@ def get_git_diff_result(
             pass
 
         template = html_templates.jinja_environment().get_template(
-            "screens/git/frame_content.jinja"
+            "screens/git/frame_result.jinja"
         )
 
         link_renderer = LinkRenderer(