StackLayout with lazy-loading

[Tobias Fensch]

Hello,
I want using a StackLayout with lazy-loading, that means load a page on first use and them in memory afterwards.

I tried the following approach:

StackLayout {
        id: mainView
        anchors.fill: parent
        anchors.leftMargin: drawer.width
        currentIndex: navigationView.currentIndex

        function isCurrentIndex(index) {
            return mainView.currentIndex === index;
        }

        Repeater {
            id: mainRepeater
            model: navigationModel.count

            Item {
                id: delegateItem

                // for lazy loading
                property bool loaded: false

                Loader {
                    anchors.fill: parent

                    active: {
                        var source = navigationModel.get(index).pageSource;
                        if (source === undefined)
                            return false;

                        // TODO: this generates a binding loop warning
                        if (delegateItem.loaded)
                            return true;

                        return mainView.isCurrentIndex(index);
                    }
                    source: navigationModel.get(index).pageSource

                    //onActiveChanged: console.log(navigationModel.get(index).pageSource + " is " + active)

                    onLoaded: {
                        delegateItem.loaded = true;
                    }
                }
            }
        }
    }

This works quite nice, but I get an error message: QML Loader: Binding loop detected for property "active"

Any idea why this is happening?

cheers!
Tobias