Kirigami.ScrollablePage: No refresh animation with short contents

Development
, , , ,
1

On a KDE Plasma Desktop Environment with Fedora and latest Kirigami, I have this code in QML

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami
import org.kde.kirigamiaddons.delegates as Delegates

Kirigami.ApplicationWindow {
    id: appWindow
    title: "Drawers App"
    width: Kirigami.Units.gridUnit * 40
    height: Kirigami.Units.gridUnit * 30

    pageStack.initialPage: Kirigami.ScrollablePage {
        id: page
        title: "Pull-to-refresh"

        supportsRefreshing: true

        Timer {
            id: fetchTimer
            interval: 1000
            repeat: false
            onTriggered: page.refreshing = false
        }

        onRefreshingChanged: {
            if (refreshing) {
                fetchTimer.restart()
            }
        }

        actions: [
            Kirigami.Action {
                text: "Refresh"
                icon.name: "view-refresh"
                onTriggered: {
                    page.refreshing = true
                }
            }
        ]

        ListView {
            id: listView
            anchors.fill: parent
            model: 50
            delegate: Controls.Label {
                text: "Item " + (index + 1)
                font.pixelSize: 20
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignHCenter
            }
        }
    }

}

Using

/usr/lib64/qt6/bin/qml mwe1.qml

and pressing the refresh button, nothing happens. If I manually scroll up during the refresh, I can see the spinner there, but it does not automatically bounce up. In other words there’s nothing visual at all unless I scroll real quick to the top.

In alligator when I refresh I can get a small bounce-up effect like this:

https://imgur.com/a/Sou3dPi

This however works properly for smaller number of items if I change line 45 to say 5 on my original demo. In this case it automatically scrolls up to reveal the indicator:

https://imgur.com/a/omFpTgx

So question – when I have llong content in a scrollview, how can I make it have the bounce animation for reload as seen in Alligator? Short content already works fine.

Thanks,

2

Ok… it turns out that in most cases, refresh will remove all items and then add new ones. If I change my refresh handler to remove and then add those items back by way of a small delay, the animation will now work correctly.

Sorry for noise!