import QtQuick
import QtQuick.Controls

ApplicationWindow
{
	id: root
	width: 640
	height: 480
    visible: true
	color: "black"

	property int val: 0

	Item {
		id: gui
		anchors.fill: parent

		Column {
			anchors.fill: parent
			padding: 10
			spacing: 10
			Row {
				padding: 10
				spacing: 10

				Repeater {
					model: 10

					Rectangle {
						id: shape
						width: 50
						height: 50
						color: root.val > index ? "lime" : "grey"

						//layer.enabled: true // enable to see the problem
					}
				}
			}
			Text {
				text: `${root.val*10} %`
				color: "white"
			}
			Button {
				text: "Reset"
				onClicked: {
					gui.visible = false // disable to prevent the problem from appearing with layer.enabled: true
					root.val = 0
				}
			}
		}
	}

	Timer {
		// Animate the progress bar
		interval: 200
		running: true
		repeat: true
		onTriggered: {
			++root.val
			if (root.val > 10)
				root.val = 0
		}
	}
	Timer {
		// Un-hide the progress bar after a short delay
		interval: 100
		running: !gui.visible
		repeat: true
		onTriggered: gui.visible = true
	}
}