Conversation
To display lottie animation in web
I moved the previous static icon in its own component and created a component that manage the loading of the appropriate icon: static or dynamic.
WalkthroughAdds a new Lottie animation asset at assets/animations/lottie-scribe.json and exposes it via a new ImagePaths getter Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@scribe/pubspec.yaml`:
- Around line 37-38: Update the lottie dependency version in pubspec.yaml:
locate the dependency entry "lottie: 3.3.1" and change it to "lottie: 3.3.2" so
the project uses the latest patch release; after updating, run pub get (or
flutter pub get) to refresh packages and verify there are no dependency
conflicts.
🧹 Nitpick comments (2)
scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart (2)
54-55: Consider usingImagePathsfor the Lottie asset path for consistency.The asset path is hardcoded here, but
ImagePaths.animLottieScribewas added in this PR specifically for this purpose. Using it would maintain consistency with how other assets are referenced throughout the codebase.♻️ Suggested refactor
This would require passing
ImagePathsto the widget similar toAiAssistantStaticButton:class AiAssistantAnimatedButton extends StatefulWidget { final void Function() onTapActionCallback; final EdgeInsetsGeometry? margin; + final ImagePaths imagePaths; const AiAssistantAnimatedButton({ super.key, required this.onTapActionCallback, + required this.imagePaths, this.margin, });Then use it in the build method:
child: Lottie.asset( - 'assets/animations/lottie-scribe.json', + widget.imagePaths.animLottieScribe, width: AIScribeSizes.aiAssistantIcon,
21-22: Consider usingSingleTickerProviderStateMixininstead ofTickerProviderStateMixin.Since this widget only uses a single
AnimationController,SingleTickerProviderStateMixinis more appropriate and slightly more efficient thanTickerProviderStateMixin.♻️ Suggested refactor
class _AiAssistantAnimatedButtonState extends State<AiAssistantAnimatedButton> - with TickerProviderStateMixin { + with SingleTickerProviderStateMixin {
|
This PR has been deployed to https://linagora.github.io/tmail-flutter/4309. |
| _animationController.reset(); | ||
| }, | ||
| child: Lottie.asset( | ||
| 'assets/animations/lottie-scribe.json', |
There was a problem hiding this comment.
Use path from ImagePaths imagePaths.animLottieScribe
There was a problem hiding this comment.
Done. I don't know why I did like this 🤔
Use imagePaths path
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart`:
- Around line 49-56: Replace the MouseRegion usage that currently calls
_animationController.forward() in the onHover callback with onEnter so the
animation only triggers once on pointer entry; similarly swap onExit handling
remains the same to reset the controller. Locate the MouseRegion widget (where
_animationController.forward() and _animationController.reset() are referenced)
and change the callback name from onHover to onEnter, keeping the same event
parameter and behavior.
🧹 Nitpick comments (1)
scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart (1)
24-25: Consider usingSingleTickerProviderStateMixin.Since there's only one
AnimationControllerin this state class,SingleTickerProviderStateMixinis more appropriate and slightly more efficient thanTickerProviderStateMixin.♻️ Suggested change
-class _AiAssistantAnimatedButtonState extends State<AiAssistantAnimatedButton> - with TickerProviderStateMixin { +class _AiAssistantAnimatedButtonState extends State<AiAssistantAnimatedButton> + with SingleTickerProviderStateMixin {
scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart
Show resolved
Hide resolved
Avoid calling repeatly the forward method that leads to start and stop of Lottie animation
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart`:
- Around line 51-52: Guard the calls to _animationController.forward() and
_animationController.reverse() in the onEnter/onExit handlers so they only run
after the Lottie composition has set a duration (i.e. when the async onLoaded
callback has completed). Concretely, update the onEnter and onExit handlers in
ai_assistant_animated_button.dart to check a safe condition (for example
_animationController.duration != null or a boolean set when the onLoaded
callback runs, or that the Lottie composition/_lottieComposition is non-null)
before calling _animationController.forward()/reverse(); leave the onLoaded
callback that sets the controller duration unchanged.
🧹 Nitpick comments (1)
scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart (1)
24-25: PreferSingleTickerProviderStateMixinwhen using a single AnimationController.Since this state class manages only one
AnimationController, usingSingleTickerProviderStateMixinis more appropriate and slightly more efficient thanTickerProviderStateMixin.♻️ Proposed change
class _AiAssistantAnimatedButtonState extends State<AiAssistantAnimatedButton> - with TickerProviderStateMixin { + with SingleTickerProviderStateMixin {
| onEnter: (event) { | ||
| _animationController.forward(); |
There was a problem hiding this comment.
Guard against calling forward() before the Lottie composition is loaded.
AnimationController.forward() asserts that duration is not null. Since the duration is only set in the onLoaded callback (which fires asynchronously), a quick hover before the composition finishes loading will trigger an assertion failure in debug mode.
🐛 Proposed fix to guard against null duration
onEnter: (event) {
- _animationController.forward();
+ if (_animationController.duration != null) {
+ _animationController.forward();
+ }
},Also applies to: 63-64
🤖 Prompt for AI Agents
In
`@scribe/lib/scribe/ai/presentation/widgets/button/ai_assistant_animated_button.dart`
around lines 51 - 52, Guard the calls to _animationController.forward() and
_animationController.reverse() in the onEnter/onExit handlers so they only run
after the Lottie composition has set a duration (i.e. when the async onLoaded
callback has completed). Concretely, update the onEnter and onExit handlers in
ai_assistant_animated_button.dart to check a safe condition (for example
_animationController.duration != null or a boolean set when the onLoaded
callback runs, or that the Lottie composition/_lottieComposition is non-null)
before calling _animationController.forward()/reverse(); leave the onLoaded
callback that sets the controller duration unchanged.
2 participants
lottiepackage to display animation in webAnimated icon is displayed in desktop only on hover for the Scribe tab button.
Demo
Screen.Recording.2026-02-04.at.13.37.25.mov
Summary by CodeRabbit