Adde Loader to only load shapes once the correct path has been generated (#851)

quickshell/Modules/DankBar/BarCanvas.qml

@@ -31,6 +31,25 @@ Item {
     readonly property string mainPath: generatePathForPosition(width, height)
     readonly property string borderFullPath: generateBorderFullPath(width, height)
     readonly property string borderEdgePath: generateBorderEdgePath(width, height)
+    property bool mainPathCorrectShape: false
+    property bool borderFullPathCorrectShape: false
+    property bool borderEdgePathCorrectShape: false
+
+    onMainPathChanged: {
+        if (width > 0 && height > 0){
+            root:mainPathCorrectShape = true;
+        }
+    }
+    onBorderFullPathChanged: {
+        if (width > 0 && height > 0){
+            root:borderFullPathCorrectShape = true;
+        }
+    }
+    onBorderEdgePathChanged: {
+        if (width > 0 && height > 0){
+            root:borderEdgePathCorrectShape = true;
+        }
+    }
 
     MouseArea {
         anchors.fill: parent
@@ -51,8 +70,12 @@ Item {
         }
     }
 
-    Shape {
+
+    Loader {
         id: barShape
+        anchors.fill: parent
+        active: mainPathCorrectShape
+        sourceComponent: Shape {
             anchors.fill: parent
             preferredRendererType: Shape.CurveRenderer
 
@@ -66,12 +89,12 @@ Item {
                 }
             }
         }
+    }
 
-    Shape {
+   Loader {
         id: barBorder
         anchors.fill: parent
-        visible: barConfig?.borderEnabled ?? false
+        active: borderFullPathCorrectShape && borderEdgePathCorrectShape
-        preferredRendererType: Shape.CurveRenderer
 
         readonly property real borderThickness: Math.max(1, barConfig?.borderThickness ?? 1)
         readonly property real inset: showFullBorder ? Math.ceil(borderThickness / 2) : borderThickness / 2
@@ -79,6 +102,11 @@ Item {
         readonly property color baseColor: (borderColorKey === "surfaceText") ? Theme.surfaceText : (borderColorKey === "primary") ? Theme.primary : Theme.secondary
         readonly property color borderColor: Theme.withAlpha(baseColor, barConfig?.borderOpacity ?? 1.0)
         readonly property bool showFullBorder: (barConfig?.spacing ?? 4) > 0
+        sourceComponent: Shape {
+            id: barBorderShape
+            anchors.fill: parent
+            preferredRendererType: Shape.CurveRenderer
+            visible: barConfig?.borderEnabled ?? false
 
             ShapePath {
                 fillColor: "transparent"
@@ -92,6 +120,7 @@ Item {
                 }
             }
         }
+    }
 
     function generatePathForPosition(w, h) {
         if (isTop)