different loadable element approaches

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double? balance;

  @override
  initState() {
    super.initState();
    load();
  }

  Future<void> load() async {
    await Future.delayed(const Duration(milliseconds: 3500));
    balance = 5.24;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(actions: [
          IconButton(
            icon: Icon(Icons.restart_alt),
            onPressed: () {
              balance = null;
              setState(() {});
              load();
            },
          )
        ]),
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Box(
                key: ValueKey(1),
                child: Align(
                  child: Text('Some Placeholder'),
                ),
              ),
              Gap(
                key: ValueKey(7),
              ),
              // just update text inside widget
              BalanceWidget(
                key: ValueKey(2),
                balance: balance,
              ),
              Gap(
                key: ValueKey(8),
              ),
              // show loader until value is loaded
              BalanceWidget(
                key: ValueKey(3),
                balance: balance,
                showLoader: true,
              ),
              Gap(
                key: ValueKey(9),
              ),
              Box(
                key: ValueKey(10),
                child: Align(
                  child: Text('Some Placeholder'),
                ),
              ),
              Gap(
                key: ValueKey(11),
              ),
              // insert widget into tree when data is loaded
              if (balance != null) ...[
                BalanceWidget(key: ValueKey(4), balance: balance),
                Gap(
                  key: ValueKey(6),
                ),
              ],
              Box(
                key: ValueKey(5),
                child: Align(
                  child: Text('Some Placeholder'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Gap extends StatelessWidget {
  const Gap({super.key});
  @override
  Widget build(BuildContext context) {
    return const SizedBox(height: 12);
  }
}

class Box extends StatelessWidget {
  final Widget? child;
  const Box({super.key, this.child});

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
          color: Colors.teal[200]!.withOpacity(0.8),
          border: Border.all(
            color: Colors.teal[800]!,
          )),
      child: SizedBox(
        height: 64,
        width: 200,
        child: child,
      ),
    );
  }
}

class BalanceWidget extends StatelessWidget {
  final double? balance;
  final bool showLoader;

  const BalanceWidget({
    super.key,
    required this.balance,
    this.showLoader = false,
  });

  @override
  Widget build(BuildContext context) {
    return Box(
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Balance:'),
            if (balance != null)
              Text(
                balance!.toStringAsFixed(2),
              )
            else if (showLoader)
              CircularProgressIndicator(
                color: Colors.teal[800]!,
                strokeWidth: 3,
              ),
          ],
        ),
      ),
    );
  }
}