How to give sleep in qml - qt

Question

When I press the button now it instantly goes to the next page. Is it possible to give this loading.gif a sleep of 5 seconds?
I have tried to give it a duration: 5000 but then it gives an error
---- FULL CODE UPDATED ----
Login.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.15
Component
{
Rectangle
{
Rectangle
{
anchors.fill: parent
// Timer for Creating delay
Timer
{
id: timer
}
function delay(delayTime,cb)
{
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}
ColumnLayout
{
// Some other items.
Button
{
onClicked:
{
backend.inloggen(email.text, wachtwoord.text, dropdown.currentText)
delay(5000, function()
{
loading_container.visible = true
})
stack.push(btnHomepage)
}
}
Rectangle
{
id: loading_container
visible: false
AnimatedImage
{
source: "./images/loading.gif"
}
}
}
}
}
}
Error: Login.qml:170: ReferenceError: delay is not defined
Sadly updating the the QtQuick nad QtQuick.controls update wasn't the solution

Answer 1

you can create delays by using Timer here is your code, I add one function that creates delay it gets duration like 5000 means 5 seconds, and one function that will be connected to Timer.
This function acts like a singleshot.
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
// Timer for Creating delay
Timer {
id: timer
}
function delay(delayTime,cb) {
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}
Rectangle
{
id: loading_container
anchors.fill: parent
color: "#d71616"
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 60
visible: false
}
Button {
id: button
x: 0
y: 0
width: 151
height: 62
text: qsTr("Click me ")
onClicked:
{
delay(5000, function() {
loading_container.visible = true
})
}
}
}

Answer 2

As you update the question, Try this :
Component encapsulated QML types with well-defined interfaces.
the way that you use it is wrong.
The way that you use Function in your program is also wrong.
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
Item {
width: 640
height: 480
Timer
{
id: timer
}
function delay(delayTime,cb)
{
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}
Rectangle
{
anchors.fill: parent
// Timer for Creating delay
// ColumnLayout
// {
// Some other items.
Button
{
onClicked:
{
// backend.inloggen(email.text, wachtwoord.text, dropdown.currentText)
delay(5000, function()
{
loading_container.visible = true
})
// stack.push(btnHomepage)
}
}
Rectangle
{
id: loading_container
visible: false
AnimatedImage
{
source: "what ever is your source path"
}
}
}
// }
}

Answer 3

In your code, the button doesn't have access to the Delay function, hence the reference error you get
Simply move the function to the button and the Timer in the root item