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

@@ -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%>

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]]

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;