Flutter: How to show a loading page while another page is loading

There are multiple ways to do this (ie., using the simplest setState, Streams, multiple packages for state management, just to name a few). I'll give you a simple example just by using a StatefulWidget where you call your API on initState and then navigate when you're done to your new screen.

class LoadingPage extends StatefulWidget {
  const LoadingPage({Key? key}) : super(key: key);

  @override
  _LoadingPageState createState() => _LoadingPageState();
}

class _LoadingPageState extends State<LoadingPage> {
  @override
  void initState() {
    super.initState();
    _fetchFromAPI();
  }

  Future<void> _fetchFromAPI() async {
    // Call some API, do anything you want while loading
    Navigator.pushReplacementNamed(context, '/home_page');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const CircularProgressIndicator(),
    );
  }
}

You can use future builder for this purpose. Have a look at: https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

You can fetch the data as snapshot and use the snapshot.hasdata to check if data is being received or not and till then you can show CircularProgreswIndicator() to show the loading..