Q:

How to delay the visibility of a Loader element content in qml?

I'm using a Loader element to load the main content qml in a asynchronous way and have it ready while showing another qml actively on the window. 
I'm trying to show the loader_two content on a timer expiry of 2 seconds. But the loader_two is visible as soon as it is loaded even before the timer expiry. How do I achieve this? 
Here is my code.
    Loader{
    id:loader_one
    active: true
    visible: true
    anchors.fill: parent
    asynchronous: true
    source: "Start.qml"
    onLoaded: {
        loader_two.active = true
        show_content_timer.start()
    }
}

Loader{
    id:loader_two
    active:false
    anchors.fill: parent
    asynchronous: true
    source: "Main_content.qml"
}
Timer{
    id: show_content_timer
    interval: 2000
    repeat: false
    running: false
    triggeredOnStart: false
    onTriggered:
    {
        console.log("2seconds expired")
        loader_one.source = ""
        loader_one.item.visible = false;
        loader_two.item.visible = true;
    }
}

A:

I'm able to achieve the delay by setting the loader_two's visibility to false by default and setting it to true once my timer expires. I was trying the same by controlling the loader_two.item.visible property which didn't work earlier.
Here is my final working code. Thanks.
Loader{
id:loader_one
active: true
visible: true
anchors.fill: parent
asynchronous: true
source: "Start.qml"
onLoaded: {
    loader_two.active = true
    show_content_timer.start()
}
}

Loader{
id:loader_two
active:false
visible: false
anchors.fill: parent
asynchronous: true
source: "Main_content.qml"
}
Timer{
id: show_content_timer
interval: 2000
repeat: false
running: false
triggeredOnStart: false
onTriggered:
{
    console.log("2seconds expired")
    loader_one.source = ""
    loader_one.item.visible = false;
    loader_two.visible = true;
}
}

