mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-16 23:04:50 +00:00
Code Issues Releases Wiki Activity

Feat: loading indicator for tiddlers being lazy loaded (#8505)

Browse Source 
* feat: basic loading

* feat: if condition

* feat: use palette

* refactor: remove css variable
This commit is contained in:
lin onetwo 2024-09-24 18:38:39 +08:00 committed by GitHub
parent 9a042c0130
commit a60e7165d2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
core/ui/ViewTemplate/lazy-loading.tid Normal file
View File

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

2
core/wiki/tags/ViewTemplate.tid
View File

@ -1,2 +1,2 @@
title: $:/tags/ViewTemplate 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]]

14
themes/tiddlywiki/vanilla/base.tid
View File

@ -1201,6 +1201,20 @@ button.tc-btn-invisible.tc-remove-tag-button {
color: <<colour muted-foreground>>; 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 { .tc-titlebar h2 {
font-size: 1em; font-size: 1em;
display: inline; display: inline;