added _preloader

Author: mychidarko

example.php

@@ -48,6 +48,6 @@
 	])
 ));
 
-
 $ui::render($ui::merge($ui::p("Something"), $ui::p("Here")));
-$ui::render($ui::_fragment([$ui::p("Something"), $ui::p("Here")]));
+$ui::render($ui::_fragment([$ui::p("Something"), $ui::p("Here")]));
+$ui::render($ui::_preloader($ui::p("Loading...")));

src/UI.php

@@ -1097,8 +1097,45 @@ public static function _datalist(string $type, string $name, string $id, array $
 	 * Custom preloader component
 	 * 
 	 * @param string|array $children Item to display as preloader
-	 */
-	public static function _preloader($children) {
-		return self::merge();
+	 * @param array $props Preloader properties
+	 */
+	public static function _preloader($children, array $props = []) {
+		if (!isset($props["id"])) $props["id"] = "leaf-ui-preloader";
+		return self::_fragment([
+			self::_style([
+				"#{$props['id']}" => "
+					position: fixed !important;
+					z-index: 1000 !important;
+					top: 0 !important;
+					left: 0 !important;
+					width: 100% !important;
+					height: 100% !important;
+					display: flex !important;
+					justify-content: center !important;
+					align-items: center !important;
+					background: white;
+				",
+				"#{$props['id']} > *" => "
+					width: 100px !important;
+				",
+				"#{$props['id']}.hidden" => "
+					animation: fadeOut 1.5s !important;
+					animation-fill-mode: forwards !important;
+				",
+				"@keyframes fadeOut" => [
+					"100%" => "
+						opacity: 0;
+						visibility: hidden;
+					"
+				]
+			]),
+			self::div($props, $children),
+			self::_script(["
+				window.addEventListener('load', function() {
+					const leafUILoader = document.getElementById('{$props['id']}');
+					leafUILoader.className += ' hidden';
+				});
+			"])
+		]);
 	}
 }