si-tree-view: the label jumps aside while the loading spinner fades out beside the returning chevron

Open Beginner friendly
  • Is something wrong?
#3,196 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
angular, scss, typescript
Domain
design, frontend

Research direction

Read projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html and its SCSS, then inspect the spinner leave animation in projects/element-ng/loading-spinner/si-loading-spinner.component.ts. Reproduce the delayed child load in src/app/examples/si-tree-view/si-tree-view-playground.ts and check the toggle layout as the spinner fades. Done means the chevron replaces the spinner without the toggle widening or the label shifting.

Written by the indexing model from the issue text.

Description

Prerequisites
  • I have read the Contributing Guidelines.
  • I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.
Affected component

si-tree-view (SiTreeViewItemComponent, the folder state toggle)

Summary

While a lazily loaded node's children load, the toggle shows si-loading-spinner instead of the chevron. When the
children arrive, the chevron comes back at once, but the spinner stays in the toggle for its 0.2 s leave fade next to
it. For that moment the toggle holds two icons, so it widens and the item's label jumps to the side and back on every
open of a lazy node.

Version
  • @siemens/element-ng 51.6.0, @siemens/element-theme 51.6.0 (also on main, 46b5bac,
    projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.html and
    projects/element-ng/loading-spinner/si-loading-spinner.component.ts)
  • Angular 22, Chromium and Firefox
Steps to reproduce
  1. A si-tree-view with an item that has children but none loaded yet (state: 'collapsed', children: []), and a
    (loadChildren) handler that answers after a short delay:
    setTimeout(() => event.callback(event.treeItem, children), 500);
  2. Open the item with its toggle and watch its label when the children arrive.
Code reproduction example

No hosted example. The playground (src/app/examples/si-tree-view/si-tree-view-playground.ts) shows it with a lazy
item when its children arrive after a delay.

What is the current bug behavior

The toggle template switches between the spinner and the chevron:

@if (isExpanding) {
  <si-loading-spinner />
} @else {
  <i aria-hidden="true" [class]="`${toggleIcon} ${folderStateClass}`"></i>
}

si-loading-spinner has host: { 'animate.leave': 'spinner-leave' } (opacity to 0 over 0.2 s). When state leaves
'expanding', the chevron is rendered right away and the spinner element is kept until its leave transition ends, so
both are laid out side by side in the toggle's flex box. The toggle grows by one icon width for 0.2 s and the label
moves aside, then back.

What is the expected correct behavior

The label stays in place. The chevron takes the spinner's place, and the spinner may fade out over it.

Possible fix

While the spinner is still there, take the chevron after it out of the flow. An absolutely positioned child of the
toggle's flex box keeps its static position at the box's center, and the leaving spinner, as large as the chevron,
keeps the toggle's width. The rule must not wait for spinner-leave, which Angular adds only after the render that
brought the chevron back:

--- a/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.scss
+++ b/projects/element-ng/tree-view/si-tree-view-item/si-tree-view-item.component.scss
 a.si-tree-view-item-toggle,
 .si-tree-context-menu-btn > div[role='button'] {
   cursor: pointer;
 }
+
+// The spinner fades out (`spinner-leave`) after the chevron is back; keep the toggle one icon wide meanwhile.
+.si-tree-view-item-toggle > si-loading-spinner + i {
+  position: absolute;
+}

We use the same rule from a global stylesheet as a workaround, and the label no longer moves.

Dominant language
TypeScript
Stars
85
Forks
28
Avg merge
1d 23h
Merged PRs (30d)
162

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from siemens/element

All issues in siemens/element

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.