Add custom Background qml item. This prevents flickering on navigation change

ScreenPlay/Resources.qrc

@@ -122,5 +122,6 @@
         <file>qml/Create/Wizards/CreateWallpaper/NextButton.qml</file>
         <file>qml/Screen/Screen.qml</file>
         <file>assets/icons/icon_screen.svg</file>
+        <file>qml/Background.qml</file>
     </qresource>
 </RCC>

ScreenPlay/assets/shader/movingcolorramp.fsh

@@ -1,4 +1,5 @@
 uniform float time;
+uniform float shaderOpacity;
 uniform vec2 resolution;
 
 void main( void ) {
@@ -12,6 +13,6 @@ void main( void ) {
 
         vec3 color = mix( color1, color2, mixValue);
 
-        gl_FragColor = vec4(color,mixValue);
+        gl_FragColor = vec4(color,mixValue) * shaderOpacity;
 
 }

ScreenPlay/main.qml

@@ -18,8 +18,6 @@ ApplicationWindow {
     minimumHeight: 788
     minimumWidth: 1050
 
-
-
     Component.onCompleted: {
         if (!screenPlaySettings.autostart) {
             show()
@@ -29,27 +27,35 @@ ApplicationWindow {
 
     function switchPage(name) {
         if (name === "Create") {
+            bg.state = "create"
             pageLoader.visible = false
             pageLoaderCreate.setSource("qrc:/qml/Create/Create.qml")
             pageLoaderCreate.visible = true
             pageLoaderWorkshop.visible = false
             sidebar.state = "inactive"
         } else if (name === "Workshop") {
+            bg.state = "init"
             pageLoader.visible = false
             pageLoaderCreate.visible = false
             pageLoaderWorkshop.setSource("qrc:/qml/Workshop/Workshop.qml")
             pageLoaderWorkshop.visible = true
             sidebar.state = "inactive"
         } else {
+            bg.state = "init"
             pageLoader.visible = true
             pageLoaderCreate.visible = false
             pageLoaderWorkshop.visible = false
             pageLoader.setSource("qrc:/qml/" + name + "/" + name + ".qml")
             sidebar.state = "inactive"
-
         }
     }
 
+
+    Background {
+        id: bg
+        anchors.fill: parent
+    }
+
     Connections {
         target: screenPlaySettings
         onSetMainWindowVisible: {

ScreenPlay/qml/Background.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.9
+
+import QtGraphicalEffects 1.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: element
+    anchors.fill: parent
+    state: "init"
+    onStateChanged: print(state)
+
+    property var myDate: new Date()
+
+    Timer {
+        interval: 16
+        running: true
+        repeat: true
+        onTriggered: colorShaderCreate.time = myDate.getMilliseconds()
+    }
+
+    ShaderEffect {
+        id: colorShaderCreate
+        anchors.fill: parent
+        blending: true
+        property real shaderOpacity: 0
+        property real time: 45
+        property vector2d resolution: Qt.vector2d(parent.width,
+                                                  parent.height * 2)
+        fragmentShader: "qrc:/assets/shader/movingcolorramp.fsh"
+    }
+
+    states: [
+        State {
+            name: "init"
+            PropertyChanges {
+                target: colorShaderCreate
+                shaderOpacity: 0
+            }
+        },
+        State {
+            name: "create"
+            PropertyChanges {
+                target: colorShaderCreate
+                shaderOpacity: 1
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "init"
+            to: "create"
+            reversible: true
+
+            PropertyAnimation {
+                target: colorShaderCreateWrapper
+                property: "shaderOpacity"
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
+        },
+        Transition {
+            from: "create"
+            to: "*"
+            reversible: true
+
+            PropertyAnimation {
+                target: colorShaderCreateWrapper
+                property: "shaderOpacity"
+                duration: 50
+                easing.type: Easing.InOutQuad
+            }
+        }
+    ]
+}

ScreenPlay/qml/Create/Create.qml

@@ -1,13 +1,12 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.2
 import QtQuick.Controls.Material 2.2
-
-import QtGraphicalEffects 1.0
 import QtQuick.Particles 2.0
+import QtGraphicalEffects 1.0
 
 import net.aimber.create 1.0
 
-Rectangle {
+Item {
     id: create
     anchors.fill: parent
     state: "out"
@@ -38,15 +37,6 @@ Rectangle {
         }
     }
 
-//    Connections {
-//        target: screenPlayCreate
-//        onLocalWorkshopCreationStatusChanged: {
-//            if (status === Create.State.Started) {
-//                loader.setSource("CreateImportStatus.qml")
-//            }
-//        }
-//    }
-
     Connections {
         target: loader.item
         ignoreUnknownSignals: true
@@ -62,24 +52,6 @@ Rectangle {
         }
     }
 
-    property var myDate: new Date()
-
-    Timer {
-        interval: 1
-        running: true
-        repeat: true
-        onTriggered: colorShader.time = myDate.getMilliseconds()
-    }
-
-    ShaderEffect {
-        id: colorShader
-        anchors.fill: parent
-        property real time: 45
-        property vector2d resolution: Qt.vector2d(parent.width,
-                                                  parent.height * 2)
-        fragmentShader: "qrc:/assets/shader/movingcolorramp.fsh"
-    }
-
     Item {
         anchors.fill: parent