feat: add lazy-loading indicator via cascade

tiddly-gittly · Aug 6, 2024 · fe10d9b · fe10d9b
1 parent 1a57bb6
commit fe10d9b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/itonnote-plugin/ViewTemplate/LazyLoadingIndicatorBody.tid b/src/itonnote-plugin/ViewTemplate/LazyLoadingIndicatorBody.tid
@@ -0,0 +1,22 @@
+title: $:/plugins/linonetwo/itonnote/ViewTemplate/LazyLoadingIndicatorBody
+
+\rules except dash
+
+<!-- Render the text to trigger lazy-loading -->
+{{||$:/core/ui/ViewTemplate/body/default}}
+<div class="skinny-tiddler-loading-indicator" />
+<style>
+  .skinny-tiddler-loading-indicator {
+    height: 4px;
+    width: 100%;
+    --c:no-repeat linear-gradient(#6100ee 0 0);
+    background: var(--c),var(--c),#d7b8fc;
+    background-size: 60% 100%;
+    animation: l16 3s infinite;
+  }
+  @keyframes l16 {
+    0%   {background-position:-150% 0,-150% 0}
+    66%  {background-position: 250% 0,-150% 0}
+    100% {background-position: 250% 0, 250% 0}
+  }
+</style>
diff --git a/src/itonnote-plugin/ViewTemplate/LazyLoadingIndicatorCascade.tid b/src/itonnote-plugin/ViewTemplate/LazyLoadingIndicatorCascade.tid
@@ -0,0 +1,5 @@
+title: $:/plugins/linonetwo/itonnote/ViewTemplate/LazyLoadingIndicatorCascade
+tags: $:/tags/ViewTemplateBodyFilter
+list-before: $:/config/ViewTemplateBodyFilters/hide-body
+
+[has:field[_is_skinny]then[$:/plugins/linonetwo/itonnote/ViewTemplate/LazyLoadingIndicatorBody]]