Loading a 600kb file causes existing animations to lag

[rc8marcelo]

Hi,

I'm trying to wrap my head around this. Basically I'm trying to display a modal bottom sheet that contains a Lottie animation. The problem here is that the animation of the actual bottom sheet lags when the Lottie file is loading (its about 600kb in size). I confirmed that it was related to loading the Lottie asset because I also tried using await AssetLottie(myAsset).load() and pass in the composition to the Lottie widget and getting the composition on the screen before the screen that displays the bottom sheet but I noticed that what happens instead is that there is a delay before the screen that contains the bottom sheet opens up.

The animation is: https://lottiefiles.com/74694-confetti

To reproduce:

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TextButton(
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) => SafeArea(
                    bottom: false,
                    child: Lottie.asset('confetti.json'),
                  ),
                );
              },
              child: Text('Open Bottomsheet')),
        ),
      ),
    );
  }
}

I've also checked if its related to the bottom sheet but it doesn't appear to be the case. I tried loading the asset during the loading state of my screen but I've noticed that the animation of a different Lottie widget stopped playing when the line containing await AssetLottie(myAsset).load() was called.