Glitch observed when reloading QML UI Screen

QMl_Enthusiast

Hello all,

I am working on a QML UI screen where I am loading a QML file (for ex - FireMode.qml) and after 4 secs timer delay again loading the same screen but while this transition is happening then for 1 sec a glitch is observed.
So I just wanted a little support here as to how to resolve this glitch issue or any alternative solution for the smooth transition.

Added here the code snippet for reference:

Main.qml

Item {
id: root
property bool isFireViewVisible: false

onIsFireViewVisibleChanged: {
if (!isFireViewVisible){
_fireModeNew.source = "FireView.qml"
}
}

// Function being called from some other Qml file
function playFireMode() {
isFireViewVisible: true
}

FireView {
    id: _fireView
    visible: isFireViewVisible
}

Loader {
id: _fireModeNew
}
}

FireView.qml
This view basically has an animation of fire images looping to infinite so that in UI it looks like a video.

Image {
property int currentImage:0

onVisibleChanged: {
    if(visible) {
        _fireViewAnimation.start()
        _fireViewLaunchTimer.start()
    }
}

//Inside assets we have 100 images starting from FireMode1.jpg
function getImage(id) {
return Qt.resolvedUrl('../../Assets/modes/FireMode/'+id+'.jpg')
}
source: getImage(currentImage)
width: getWidth()
height: getHeight()
x: getX()
y: getY()

 NumberAnimation on currentImage {
         id: _fireViewAnimation
         loops: Animation.Infinite
         from: 0
         to: 191
         duration: 5000
         running: false
     }

Timer {
id: _fireViewLaunchTimer
interval: 5000
repeat: false
running: false
triggeredOnStart: false
onTriggered: {
root.isFireViewVisible= false
_fireViewAnimation.stop()
}
}
}