[ui] Homepage: Highlight the pipeline or project that is being loaded#3080
Merged
nicolas-lambert-tc merged 7 commits intodevelopfrom Apr 30, 2026
Merged
[ui] Homepage: Highlight the pipeline or project that is being loaded#3080nicolas-lambert-tc merged 7 commits intodevelopfrom
nicolas-lambert-tc merged 7 commits intodevelopfrom
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #3080 +/- ##
========================================
Coverage 83.47% 83.47%
========================================
Files 81 81
Lines 10301 10301
========================================
Hits 8599 8599
Misses 1702 1702 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a “loading/selected” visual state on the Homepage when the user clicks a pipeline or recent project, ensuring the highlight/spinner is rendered before starting the synchronous load that blocks the UI thread.
Changes:
- Add
isLoading+loadingIndexstate to track which pipeline/project is being loaded and dim non-selected items. - Introduce
executeAfterFrameRendered()using_window.frameSwappedto defer the heavy load until after a frame is presented. - Add highlight borders and BusyIndicators to pipeline and project delegates during loading.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
…urrent frame Forcing the loading actions to start after the current frame has been rendered prevents from blocking the GUI as soon as the user has clicked on a project/pipeline while it is being loaded.
…red` In addition to a function, `executeAfterFrameRendered` now accepts function parameters as well. If none are provided, the input function is executed as is (`function()`). Otherwise, the parameters are passed to it (`function(params)`).
Since there are two different paths to open a project (either by clicking on the project's thumbnail, or by clicking "Open" after a right-click on the project's thumbnail), the code to open it was duplicated in two different places. A single function is added to perform that operation, and is now called in both places, using the updated prototype of the `executeAfterFrameRendered` function.
cbentejac
force-pushed
the
dev/highlightProject
branch
from
8dd513f to
c394ebd
Compare
nicolas-lambert-tc
approved these changes
Apr 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR highlights the pipeline or project that is clicked on (and then loaded in the application) on the Homepage. In particular, it pushes a graphical update right before the loading process is started, ensuring the Homepage will display the loading state.
The selected project or pipeline will be highlighted with a colored border and a busy indicator, while the non-selected projects/pipelines will have their opacity dimmed.
Implementation remarks
The
executeAfterFrameRenderedfunction has been added to ensure that a graphical update is pushed before processing the load of the selected project/pipeline, which then blocks the UI.Closes #2812.