Lottie animation plays on for the first time while debugging.

[SangamJungGauli]

Lottie animation works fine for the first time only when started from IDE. Later on, when it is closed and opened again, the app just loads the image but does not play the animation. Here is the code to my app

class SplashPage extends StatefulWidget {
  const SplashPage({super.key});

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      //duration: Duration(seconds: 6),
      vsync: this,
    );
    controller.addStatusListener((status) async {
      if (status == AnimationStatus.completed) {
        print("completed");
        controller.reset();
      }
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Column(
        children: [
          Image.asset(
            "assets/images/logo.png",
            width: 300,
            height: 300,
            fit: BoxFit.contain,
          ),
          // SizedBox(
          //   height: 10.0,
          // ),
          Lottie.asset('assets/lottie/books.json',
              height: 300,
              frameRate: FrameRate.max,
              animate: true,
              controller: controller, onLoaded: (composition) {
            controller.duration = composition.duration;
            controller.forward();
          }),
          SizedBox(
            height: 15.0,
          ),
          Text("Powered By",
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))
        ],
      ),
    );
  }
}