1 files changed, 37 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/data-widget-loader.jsx b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/data-widget-loader.jsx
new file mode 100755
index 0000000..4115024
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/components/data/data-widget-loader.jsx
@@ -0,0 +1,37 @@
+import * as Uebersicht from "uebersicht";
+import * as Utils from "../../utils";
+
+export { dataWidgetLoaderStyles as styles } from "../../styles/components/data/data-widget-loader";
+
+const { React } = Uebersicht;
+
+/**
+ * A memoized React component that renders a data widget loader.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} [props.width=14] - The width of the loader.
+ * @param {number} [props.height=14] - The height of the loader.
+ * @param {string} [props.className] - Additional class names for the loader.
+ * @param {Object} [props.style] - Additional styles for the loader.
+ * @returns {JSX.Element} The rendered data widget loader component.
+ */
+export const Widget = React.memo(
+  ({ width = 14, height = 14, className, style }) => {
+    // Generate class names using the Utils.classNames function
+    const classes = Utils.classNames("data-widget-loader", "data-widget", {
+      [className]: className,
+    });
+
+    // Return the JSX for the data widget loader
+    return (
+      <div className={classes} style={style}>
+        <div
+          className="data-widget-loader__inner"
+          style={{ width, height, flex: `0 0 ${width || height}px` }}
+        />
+      </div>
+    );
+  },
+);
+
+Widget.displayName = "DataWidgetLoader";