palantir/blueprint

Loading state for tree nodes while children are loading asynchronously

Open

#3,729 opened on Sep 9, 2019

View on GitHub
 (6 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
Package: coreType: feature requesthelp wanted

Description

Would it work if one was to set the hasCaret prop to whether or not children are available, display a spinner upon onExpand while fetching content from elsewhere, and then replace the spinner with the actual content upon completion?

If so, what would be an elegant way to display a spinner? At first glance, it seems like the only valid type of children are again tree nodes. Those could at least have a label "loading" and be disabled for the time being, however I would much rather prefer a spinner. Could the children prop be used for this?

Thanks for any hints.

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with React and Blueprint's Tree component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Explore the Tree component's source code in the Blueprint repository (likely in packages/core/src/components/tree/). Investigate how other Blueprint components like Button or Spinner implement loading states. Review any existing discussions in the issue comments for design preferences. Consider implementing a loading spinner that appears next to a tree node when its children are being fetched asynchronously.