How can I show CircularProgressIndicator() on when method in AsyncData?

Question

I want to show CircularProgressIndicator() during loading process with FutureProvider and when() method as following code. print("It works");//here is worked as expected but, CircularProgressIndicator() has never been shown at loading,//here. Is my way of using this method wrong or I should fix other things?

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:cards/view/register2.dart';
import 'package:cards/view/register4.dart';
import 'package:cards/main.dart';
import 'gender.dart';
import 'header.dart';
import 'navigate.dart';
import 'style.dart';

final authFutureProvider = FutureProvider<bool>(
  (ref) async => authUser(ref),
);

class Register3Widget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authC = ref.watch(authFutureProvider);
    Widget? loading;
    authC.when(
      data: (data) {},
      error: (error, stackTrace) {},
      loading: () {
        print("It works");//here test and actually it worked
        final loading = CircularProgressIndicator();
      },
    );
    final alertMessage = ref.watch(completeErrorMessage);
    return Scaffold(
        body: Padding(
      padding: const EdgeInsetsDirectional.fromSTEB(20, 75, 20, 0),
      child: Column(
        children: [
          Container(
            width: double.infinity,
            height: 50,
            alignment: Alignment.topLeft,
            child: Image.asset('images/logo.png'),
          ),
          Container(
            padding: const EdgeInsetsDirectional.fromSTEB(10, 0, 10, 0),
            margin: const EdgeInsets.only(top: 30),
            width: double.infinity,
            child: Column(
              children: [
                Align(
                  child: GenderSelect(),
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Align(
                        alignment: Alignment.topRight,
                        child: MyNavigator(
                          destinationTo: Register2Widget(),
                          context: context,
                          goBack: "back",
                        ),
                      ),
                      Align(
                        child: MyNavigator(
                            destinationTo: Register4Widget(),
                            context: context,
                            goBack: "Send Email"),
                      ),
                    ]),
                Align(
                  child: loading,//here
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  child: alertMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    ));
  }
}

Extracode:

    authC.when(
      data: (data) {},
      error: (error, stackTrace) {},
          loading: () {
        final loading = 
        WidgetsBinding.instance.addPostFrameCallback((_) {
            showDialog(
            context: context,
            builder: (context) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
        );
        });
      },
    );

Extracode2:

loading: () {
        final loading = 
        WidgetsBinding.instance.addPostFrameCallback((_) {
            showDialog(
            context: context,
            builder: (context) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
        );
        Navigator.of(context).pop();
        });
      },

Answer 1

You are missing to return the widget from loading

 loading: () {
        final loading = CircularProgressIndicator();
        return loading; //this
      },

Also the top level return, It will be like

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final authC = ref.watch(authFutureProvider);
   
    return Scaffold( //here top level return
      body: authC.when(
        data: (data) {
          return Padding(child: ....,);
        },
        error: (error, stackTrace) {
          return Text("got Error");
        },
        loading: () {
          final loading = CircularProgressIndicator();

          return loading;
        },
      ),
    );

Or just

                Align(
                  child: authC.when(
                    data: (data) {},
                    error: (error, stackTrace) {},
                    loading: () {
                      return CircularProgressIndicator();
                    },
                  ),
                ),