romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-07-15 12:54:06 +00:00
Code Issues Releases Activity

Add nice loading indicator to the host tree

Browse Source
This commit is contained in:
Romein van Buren
2023-12-22 17:05:32 +01:00
parent 426b0b8468
commit fd1340f9e4
5 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/grid/grid-items.svelte
View File

@ -156,6 +156,10 @@
<Icon name={childrenOpen[item[key]] ? 'chev-d' : 'chev-r'} />
</button>
{/if}
{#if item.loading}
<span class="spinner" style:margin-left="{level * 10}px" />
{/if}
</td>
{/if}
@ -234,11 +238,25 @@
text-overflow: ellipsis;
}
td.has-toggle {
position: relative;
width: 1.5em;
}
td.has-toggle .spinner {
position: absolute;
top: 0.3em;
left: 0.22em;
width: 1em;
height: 1em;
border: 1px solid var(--primary);
border-radius: 50px;
border-top-color: transparent;
border-left-color: transparent;
animation: .6s linear 0 spin;
animation-iteration-count: infinite;
}
td.has-icon {
padding: 0;
width: 1px;
width: 1.5em;
}
td.has-icon :global(svg) {
width: 1em;

7
frontend/src/components/icon.svelte
View File

@ -11,11 +11,6 @@
</script>
<style>
@keyframes spinning {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
svg {
transition: transform 0.25s;
will-change: transform;
@ -23,7 +18,7 @@
height: 1.2em;
}
svg.spinning {
animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
:global(.field) svg {