date indicator: put each style in a loader

.config/quickshell/ii/modules/background/cookieClock/CookieClock.qml

@@ -149,6 +149,7 @@ Item {
         anchors.fill: parent
         colOnBackground: root.colOnBackground
         style: Config.options.background.clock.cookie.dateStyle
+        dateSquareSize: root.dateSquareSize
     }
 
 }

.config/quickshell/ii/modules/background/cookieClock/DateIndicator.qml

@@ -11,22 +11,25 @@ Item {
     id: root
     property string style: "rotating"
     property color colOnBackground: Appearance.colors.colOnSecondaryContainer
-    property color colOnSecondary: Appearance.colors.colOnSecondaryContainer
+    property color colBackground: Appearance.colors.colOnSecondaryContainer
+    property real dateSquareSize: 64
 
-
+    Loader {
-    Canvas {
-        z: 0
         anchors.fill: parent
-        rotation: {
-            if (!Config.options.time.secondPrecision) return 0;
-            return (secondHandLoader.item.rotation + 45);  // +45 degrees to align text's center
-        }
-        
         opacity: root.style === "rotating" ? 1.0 : 0
         Behavior on opacity {
             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
         }
 
+        active: opacity > 0
+        sourceComponent: Canvas {
+            z: 0
+            rotation: {
+                if (!Config.options.time.secondPrecision)
+                    return 0;
+                return (secondHandLoader.item.rotation + 45);  // +45 degrees to align text's center
+            }
+
             onPaint: {
                 var ctx = getContext("2d");
                 ctx.clearRect(0, 0, width, height);
@@ -55,25 +58,28 @@ Item {
                 }
             }
         }
+    }
 
     // Square date (only today's number) in right side of the clock
-    Rectangle {
+    Loader {
-        z: 1
-        implicitWidth: root.style === "rect" ? 45 : 0
-        implicitHeight: root.style === "rect" ? 30 : 0
-        color: root.colOnSecondary
-        radius: Appearance.rounding.small
         anchors {
             verticalCenter: parent.verticalCenter
             right: parent.right
             rightMargin: 10
         }
-        Behavior on implicitHeight {
+        width: root.style === "rect" ? 45 : 0
+        height: root.style === "rect" ? 30 : 0
+        Behavior on width {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
-        Behavior on implicitWidth {
+        Behavior on height {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
+        active: height > 0
+        sourceComponent: Rectangle {
+            z: 1
+            color: root.colBackground
+            radius: Appearance.rounding.small
             StyledText {
                 opacity: root.style === "rect" ? 1.0 : 0
                 Behavior on opacity {
@@ -89,28 +95,29 @@ Item {
                 }
             }
         }
+    }
 
     // Date bubble style left side
-    Item {
+    Loader {
-        width: root.style === "bubble" ? dateSquareSize : 0
-        height: root.style === "bubble" ? dateSquareSize : 0
         anchors {
             left: parent.left
             bottom: parent.bottom
             topMargin: 50
         }
-        Behavior on width {
+        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        width: targetSize
-        }
+        height: targetSize
-        Behavior on height {
+        Behavior on targetSize {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
+        active: targetSize > 0
+        sourceComponent: Item {
             MaterialCookie {
                 z: 5
                 sides: 4
                 anchors.centerIn: parent
                 color: Appearance.colors.colPrimaryContainer
-            implicitSize: root.style === "bubble" ? dateSquareSize : 0
+                implicitSize: root.style === "bubble" ? root.dateSquareSize : 0
                 constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
                 Behavior on implicitSize {
                     animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
@@ -132,28 +139,30 @@ Item {
                 }
             }
         }
+    }
 
     // Date bubble style right side
-    Item {
+    Loader {
-        width: root.style === "bubble" ? dateSquareSize : 0
-        height: root.style === "bubble" ? dateSquareSize : 0
         anchors {
             right: parent.right
             top: parent.top
             bottomMargin: 50
         }
-        Behavior on width {
+        property real targetSize: root.style === "bubble" ? root.dateSquareSize : 0
-            animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
+        width: targetSize
-        }
+        height: targetSize
-        Behavior on height {
+        Behavior on targetSize {
             animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
         }
+
+        active: targetSize > 0
+        sourceComponent: Item {
             MaterialCookie {
                 z: 5
                 sides: 1
                 anchors.centerIn: parent
                 color: Appearance.colors.colTertiaryContainer
-            implicitSize: root.style === "bubble" ? dateSquareSize : 0
+                implicitSize: root.style === "bubble" ? root.dateSquareSize : 0
                 constantlyRotate: Config.options.background.clock.cookie.constantlyRotate
                 Behavior on implicitSize {
                     animation: Appearance.animation.elementResize.numberAnimation.createObject(this)
@@ -176,3 +185,4 @@ Item {
             }
         }
     }
+}