From a60e7165d245a47c2c62fed957d8cef4b67dfb9d Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Tue, 24 Sep 2024 18:38:39 +0800
Subject: [PATCH] Feat: loading indicator for tiddlers being lazy loaded
 (#8505)

* feat: basic loading

* feat: if condition

* feat: use palette

* refactor: remove css variable
---
 core/ui/ViewTemplate/lazy-loading.tid | 10 ++++++++++
 core/wiki/tags/ViewTemplate.tid       |  2 +-
 themes/tiddlywiki/vanilla/base.tid    | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 core/ui/ViewTemplate/lazy-loading.tid

diff --git a/core/ui/ViewTemplate/lazy-loading.tid b/core/ui/ViewTemplate/lazy-loading.tid
new file mode 100644
index 000000000..dca9553a5
--- /dev/null
+++ b/core/ui/ViewTemplate/lazy-loading.tid
@@ -0,0 +1,10 @@
+title: $:/core/ui/ViewTemplate/lazy-loading
+tags: $:/tags/ViewTemplate
+
+\whitespace trim
+<%if [<currentTiddler>has:field[_is_skinny]] %>
+  <!-- Render the text to trigger lazy-loading -->
+  {{||$:/core/ui/ViewTemplate/body/default}}
+  <!-- Indicator of loading state -->
+  <div class="tc-tiddler-lazy-loading" />
+<%endif%>
diff --git a/core/wiki/tags/ViewTemplate.tid b/core/wiki/tags/ViewTemplate.tid
index ab86265a7..8797bf054 100644
--- a/core/wiki/tags/ViewTemplate.tid
+++ b/core/wiki/tags/ViewTemplate.tid
@@ -1,2 +1,2 @@
 title: $:/tags/ViewTemplate
-list: [[$:/core/ui/ViewTemplate/title]] [[$:/core/ui/ViewTemplate/unfold]] [[$:/core/ui/ViewTemplate/subtitle]] [[$:/core/ui/ViewTemplate/tags]] [[$:/core/ui/ViewTemplate/classic]] [[$:/core/ui/ViewTemplate/body]]
+list: [[$:/core/ui/ViewTemplate/title]] [[$:/core/ui/ViewTemplate/unfold]] [[$:/core/ui/ViewTemplate/subtitle]] [[$:/core/ui/ViewTemplate/tags]] [[$:/core/ui/ViewTemplate/classic]] [[$:/core/ui/ViewTemplate/body]] [[$:/core/ui/ViewTemplate/lazy-loading]]
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 4a4867c0b..112233016 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -1201,6 +1201,20 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	color: <<colour muted-foreground>>;
 }
 
+.tc-tiddler-lazy-loading {
+	height: 4px;
+	width: 100%;
+	background: no-repeat linear-gradient(<<colour background>> 0 0),no-repeat linear-gradient(<<colour background>> 0 0),<<colour primary>>;
+	background-size: 60% 100%;
+	animation: animation-loading-progress 3s infinite;
+}
+
+@keyframes animation-loading-progress {
+	0%   {background-position:-150% 0,-150% 0}
+	66%  {background-position: 250% 0,-150% 0}
+	100% {background-position: 250% 0, 250% 0}
+}
+
 .tc-titlebar h2 {
 	font-size: 1em;
 	display: inline;