fix(web): mitigate flickering at progress and loaders #2255
Conversation
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
Simplified the layout to ensure that, from "md" screen sizes onwards, the container fills the full width and the step occupies 33% of the available height. While the approach for displaying progress is not yet perfect, these changes help minimize layout shifts and reduce the movement of elements when steppers are re-rendered with different information.
To help mitigating the "jumping" behavior when transitioning from a loading state in a container with a short height to one with a larger height.
And rename the prop from `useLayout` to `listenQuestions` to more accurately describe its purpose and to avoid the "use" prefix, which should be reserved for hooks.
This commit introduces a new variant for the Loading component, allowing it to be used without occupying the full screen or available space. This should help reduce the sensation of loading messages jumping when transitioning from a general loader to a more specific one, especially when the latter is placed inside its container. Additionally, the "full screen" variant has been re-centered, effectively reverting commit 0160427. However, this time, it uses Flexbox with specific styling rather than relying on the Bullseye component.
The component now expects explicit text to be provided each time it is mounted, or no text will be shown by default. This helps avoid the potential misuse of default text and ensures something really generic when the text props is not given.
And adjusts its tests a little bit.
dgdavid
changed the title
joseivanlopez
approved these changes
Apr 10, 2025
Contributor
|
Approved, but there is a conflict ;-) |
Contributor
Author
Ah, I see. You were faster 😜 Conflict fixed. Let me know if I can merge it now. |
Merged
imobachgs
added a commit
that referenced
this pull request
Apr 22, 2025
Prepare to release Agama 14: * #1994 * #2041 * #2103 * #2178 * #2189 * #2200 * #2205 * #2209 * #2212 * #2213 * #2214 * #2215 * #2216 * #2217 * #2219 * #2220 * #2224 * #2225 * #2226 * #2227 * #2228 * #2230 * #2231 * #2232 * #2233 * #2235 * #2237 * #2239 * #2241 * #2242 * #2244 * #2245 * #2246 * #2247 * #2248 * #2249 * #2250 * #2251 * #2252 * #2253 * #2254 * #2255 * #2256 * #2257 * #2259 * #2260 * #2262 * #2265 * #2266 * #2268 * #2269 * #2271 * #2272 * #2273 * #2275 * #2276 * #2278 * #2281
This was referenced May 5, 2025
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.
Problem
The interface experiences flickering when transitioning between loading states or from one substep to another within a progress stepper. This causes a noticeable "dancing" effect, disrupting the user experience.
Solution
To mitigate the flickering effect, improvements have been made to the involved components, bearing in mind that more significant updates or a full redesign may be necessary in the future.
In brief, the
ProgressSteppernow has a fixed full width and also sets a fixed height for its steps, reducing layout shifts. The loading indicator has been centered more effectively, and the default text has been removed to minimize the perception of movement. This change addresses the issue of three distinct loading states in the application, triggered at different stages (without layout, with layout but no header/sidebar, and within a layout that includes both the header and possibly a sidebar, depending on the available width).Additionally, removing the default text helps prevent its misuse. For example, the text "Loading installation environment" was displayed even after the environment was set up and the application was actually waiting for installation settings.
Testing
Screenshots
N/A
It is better to test manually to see changes in action.
Documentation
N/A
Related to https://trello.com/c/nvTb8WwM (private link) and https://bugzilla.suse.com/show_bug.cgi?id=1239622 (private link)
Fixes #2240