Enhance feature library shimmer with theming and dismissal
What does this MR do and why?
This reverts !243508 (merged) (which switched the "More features" shimmer effect to a badge) back to the shimmer, then builds several enhancements on top of it:
- Theme-aware colors: the shimmer gradient and inner outline now derive from
--super-sidebar-theme-accent-color, so the effect matches the active sidebar theme (blue, green, red, gray, indigo) in both light and dark modes instead of being hardcoded to purple. - Reduced-motion scoping: the gradient and animation are scoped to
@media (prefers-reduced-motion: no-preference)so they never obscure the nav item's interactivebackground-colorstates, and reduced-motion users get the plain tertiary nav item. - Time-based fade-out: the shimmer sweeps for several iterations, then fades away and reverts to the default tertiary nav item styling.
- Inset outline: the 2px outline uses an inset
box-shadowinstead of a realborder, so it no longer offsets the nav item's layout. - Dismissal persistence: once the user opens the feature library modal, a
feature_library_shimmer_seenuser callout is recorded so the animation never plays again on subsequent visits. This uses the existinguser_calloutssystem (no new table or migration).
References
- Reverts !243508 (merged)
- Context: !243508 (comment 3537347887)
Database review
SidebarsHelper#show_feature_library_shimmer? calls User#dismissed_callout?, which loads the current user's callouts on logged-in page loads. The call is now guarded by the feature_library_modal feature flag, so no query runs when the flag is disabled. When enabled, it issues a single indexed lookup by user_id (results are memoized per request via User#callouts_by_feature_name).
Raw SQL:
SELECT "user_callouts".*
FROM "user_callouts"
WHERE "user_callouts"."user_id" = 1;Query plan (EXPLAIN):
Index Scan using index_user_callouts_on_user_id_and_feature_name on user_callouts (cost=0.15..7.28 rows=7 width=28)
Index Cond: (user_id = 1)The lookup uses the existing composite index index_user_callouts_on_user_id_and_feature_name (Index Scan, no sequential scan). No schema changes, migrations, or new tables are introduced; the query targets the existing user_callouts table.
Screenshots or screen recordings
| Before | After |
|---|---|
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- Enable the feature flag at https://gdk.test:3000/rails/features/feature_library_modal
- Go to a page, e.g. https://gdk.test:3000/flightjs/Flight/-/merge_requests
- Observe the "More features" nav item shimmer, then fade out to the default styling.
- Switch between user themes at https://gdk.test:3000/-/profile/preferences and confirm the shimmer color matches each theme in light and dark mode.
- Open the "More features" modal, reload the page, and confirm the shimmer no longer plays.
To replay the animation after dismissal, remove the callout in the Rails console:
User.find_by_username('root').callouts.where(feature_name: :feature_library_shimmer_seen).delete_allMR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.



