Add shimmer to entry skeletons

[myieye]

A user thought that his dictionary didn't load on his phone, because it was taking too long (at least I think that was the problem).

See #2033 for the simple performance improvement I'm using for now.

I'm hoping this more noticeable loading effect will be advantageous in that regards.

localhost_5137_project_elawa-dev-flex_browse.-.Google.Chrome.2025-10-09.12-00-41.mp4

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates the skeleton UI in EntryRow.svelte to use motion-safe shimmer/pulse animations with preserved computed widths and explicit delays. Extends Tailwind config with shimmer keyframes, animation, background image, and background size utilities.

Changes

Cohort / File(s)	Summary
Skeleton placeholder update frontend/viewer/src/project/browse/EntryRow.svelte	Replaced prior skeleton markup with an outer wrapper containing three individually animated blocks: headword uses motion-safe:animate-shimmer; definition and badge use motion-safe:animate-pulse with preserved animation-delay and computed widths (headwordWidth, definitionWidth, badgeWidth).
Tailwind shimmer utilities frontend/viewer/tailwind.config.ts	Added keyframes "shimmer" (background-position 100% → -100%); animation "shimmer" (2s linear infinite); backgroundImage "shimmer" (90° linear-gradient with CSS variables); backgroundSize "shimmer" (200% 100%).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I twitch my ears at shimmering light,
New gradients glide—so sleek, so bright.
Pulse for the notes, shimmer for names,
Tailwind taught my UI new games.
I thump with joy, then hop away—
Skeletons dance in soft display.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title “Add shimmer to entry skeletons” succinctly and accurately captures the primary change of introducing a shimmer animation to the entry skeleton components, making it immediately clear to reviewers what the pull request implements.
Description Check	✅ Passed	The description explains the motivation for the shimmer effect by referencing a user report about perceived loading delays, cites a related performance improvement PR, and links to an illustrative asset, all of which directly relate to the implemented changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch more-apparent-entry-loading-skeletons

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

UI unit Tests

  1 files  ±0   45 suites  ±0   29s ⏱️ -1s
111 tests ±0  111 ✅ ±0  0 💤 ±0  0 ❌ ±0 
160 runs  ±0  160 ✅ ±0  0 💤 ±0  0 ❌ ±0 

Results for commit cf5e3e5. ± Comparison against base commit 010ba63.

♻️ This comment has been updated with latest results.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Oct 9, 2025, 10:27 AM

[github-actions]

C# Unit Tests

130 tests  ±0   130 ✅ ±0   19s ⏱️ ±0s
 20 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit cf5e3e5. ± Comparison against base commit 010ba63.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 010ba63 and cf5e3e5.

📒 Files selected for processing (2)

• frontend/viewer/src/project/browse/EntryRow.svelte (1 hunks)
• frontend/viewer/tailwind.config.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)

• GitHub Check: Build UI / publish-ui
• GitHub Check: Build API / publish-api
• GitHub Check: Build FW Lite and run tests
• GitHub Check: frontend-component-unit-tests
• GitHub Check: frontend
• GitHub Check: check-and-lint
• GitHub Check: Analyze (csharp)

🔇 Additional comments (4)

frontend/viewer/tailwind.config.ts (2)

132-139: LGTM!

The shimmer keyframes correctly animate the background-position from right to left, creating a sliding gradient effect.

---

145-145: LGTM!

The animation duration of 2.0s with linear timing and infinite repetition is appropriate for a loading shimmer effect.

frontend/viewer/src/project/browse/EntryRow.svelte (2)

48-52: Verify shimmer effect works correctly.

The skeleton UI refactoring looks good, with individual animations creating visual interest. However, the shimmer effect on line 49 may not work as intended due to the missing background-size property. The shimmer animation requires a background sized at 200% to slide the gradient across the element.

Ensure that after fixing the naming conflict in tailwind.config.ts, both the gradient and the background-size are applied to the headword skeleton. Test the visual effect on various devices to confirm the shimmer is visible and performs smoothly.

Accessibility note: Good use of motion-safe: prefix to respect user preferences for reduced motion.

---

50-51: Animation delay creates good staggered effect.

The use of animation-delay on the definition and badge (but not the headword) creates a nice staggered loading appearance. This improves perceived performance and visual interest.

[megahirt]

Is there any way to show loading progress with a progress bar? I know that has to be engineered and can be challenging... Performance on mobile phone can vary widely!

[myieye]

@megahirt Yeah, definitely non-trivial.

[megahirt]

@megahirt Yeah, definitely non-trivial.

I don't know if what we did in LF ended up being helpful to users, but for S/R we essentially did progress loading indicator based on the last successful time to sync. So if the time to sync took 2 min last time, then we just showed a progress bar crawling across to 80% in about 2 min time.

[myieye]

@megahirt I like the idea of showing progress for syncing 👍, but this PR is just about loading entries.