feat(scss): adds lazy loading functionality

Implements lazy loading for images using CSS to improve page load performance and user experience.

This adds a spinner effect while the image is loading.

Author: firestar300

src/scss/04-utilities/_lazyload.scss

@@ -0,0 +1,77 @@
+@use "../01-abstract/variables" as *;
+@use "sass:math";
+
+.lazyload,
+.lazyloading {
+	background: $color-grey-200;
+	opacity: 0;
+}
+
+.lazyloaded {
+	opacity: 1;
+	transition: opacity .5s;
+}
+
+// css loading for bgset items
+// with basicspinner
+$loading-dimensions: 50px;
+
+[data-bgset] {
+	position: relative;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: cover;
+	opacity: 1;
+
+	&::before {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 2;
+		content: "";
+		background: $color-primary;
+		transition: opacity .5s, z-index .5s ease .5s;
+	}
+
+	&::after {
+		position: absolute;
+		top: calc(50% - #{math.div($loading-dimensions, 2)});
+		left: calc(50% - #{math.div($loading-dimensions, 2)});
+		z-index: 3;
+		width: $loading-dimensions;
+		height: $loading-dimensions;
+		content: "";
+		border: 5px solid $color-light;
+		border-top-color: transparent;
+		border-radius: $loading-dimensions;
+		opacity: 1;
+		transition: opacity .5s, z-index .5s ease .5s;
+		transform: translateX(-50%) translateY(-50%);
+		animation: loading .5s linear infinite;
+	}
+
+	&.lazyload {
+		opacity: 1;
+		transition: opacity .5s;
+	}
+
+	&.lazyloaded {
+		&::after,
+		&::before {
+			z-index: -1;
+			opacity: 0;
+		}
+	}
+}
+
+@keyframes loading {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/scss/editor.scss

@@ -27,6 +27,7 @@ variables.$entry-file-name: "editor";
 
 @use "04-utilities/wp-admin-bar";
 @use "04-utilities/focus";
+@use "04-utilities/lazyload";
 @use "04-utilities/seo";
 @use "04-utilities/video-wrapper";
 @use "04-utilities/palette";

src/scss/style.scss

@@ -31,6 +31,7 @@ variables.$entry-file-name: "style";
 
 @use "04-utilities/wp-admin-bar";
 @use "04-utilities/focus";
+@use "04-utilities/lazyload";
 @use "04-utilities/seo";
 @use "04-utilities/video-wrapper";
 @use "04-utilities/palette";