How to just use getx to simulate "pull_to_refresh" widget animation?

[dbsxdbsx]

I want to just use getx for a pullupable list app. At present, there is package can do so, called pull_to_refresh.

To test, I coded like below:

1. the view code

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'ctrl.dart';

class CityPage extends GetView<CityController> {
  const CityPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Cities')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () => controller.getStates(),
            child: const Text(
              'Search Cities',
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ),
          Expanded(
            child: controller.obx(
              (state) => ListView.builder(
                itemCount: state!.length,
                itemBuilder: (context, index) {
                  return Text(state[index].nome);
                },
              ),
            ), //obx
          ),
        ],
      ),
      // onLoading: const Center(child: CircularProgressIndicator()),
      // onLoading: const LoadingSpinner(),
      // onEmpty: const Text("onEmpty"),
      // onError: (error) => Text("onError" + error.toString()),
    );
  }
}

2. the control code:

import 'package:dio/dio.dart';
import 'package:get/get.dart';

import 'model.dart';

class CityController extends GetNotifier<List<StateModel>>
 {
  final Dio dio = Dio();
  // What differentiates GetNotify from StateMix, is the need to start
  // the Model with a value, that is, the constructor is mandatory
  CityController({List<StateModel>? initial})
      : super(initial ?? [StateModel(sigla: 'empty_sig', nome: 'empty_nome')]);

  getStates() {
    change(null, status: RxStatus.loading());
    const String url =
        'https://servicodados.ibge.gov.br/api/v1/localidades/estados';

    dio.get(url).then((result) {
      List<StateModel> data = StateModel.listFromJson(result.data);
      change(data, status: RxStatus.success());
    }, onError: (err) {
      change(null, status: RxStatus.error(err.toString()));
    });
  }
}

Here, the problem is , the WHOLE list content is replaced by a "spinner animation" even I comment out onLoading: const LoadingSpinner() (it means that getx would show a "loading animation" by default).
And what I want is only show the "loading animation" on the bottom of screen.

How to modify my code to do so?