Adding OpenHaystack Mobile app

Co-Authored-By: Lukas Burg <lukas.burg@hemalu.de>

openhaystack-mobile/lib/placeholder/avatar_placeholder.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+class AvatarPlaceholder extends StatelessWidget {
+  final double size;
+
+  /// Displays a placeholder for the actual avatar, occupying the same layout space.
+  const AvatarPlaceholder({
+    Key? key,
+    this.size = 24,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size * 3 / 2,
+      height: size * 3 / 2,
+      decoration: const BoxDecoration(
+        color: Color.fromARGB(255, 200, 200, 200),
+        shape: BoxShape.circle,
+      ),
+    );
+  }
+}

openhaystack-mobile/lib/placeholder/text_placeholder.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+
+class TextPlaceholder extends StatefulWidget {
+  final double maxWidth;
+  final double? width;
+  final double? height;
+  final bool animated;
+
+  /// Displays a placeholder for the actual text, occupying the same layout space.
+  /// 
+  /// An optional loading animation is provided.
+  const TextPlaceholder({
+    Key? key,
+    this.maxWidth = double.infinity,
+    this.width,
+    this.height = 10,
+    this.animated = true,
+  }) : super(key: key);
+
+  @override
+  _TextPlaceholderState createState() => _TextPlaceholderState();
+}
+
+class _TextPlaceholderState extends State<TextPlaceholder> with SingleTickerProviderStateMixin{
+  late Animation<double> animation;
+  late AnimationController controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    controller = AnimationController(
+      vsync: this,
+      duration: const Duration(seconds: 1),
+    );
+    animation = Tween<double>(begin: 0, end: 1).animate(controller)
+      ..addListener(() {
+        setState(() {}); // Trigger UI update with current value
+      })
+      ..addStatusListener((status) {
+        if (status == AnimationStatus.completed) {
+          controller.reverse();
+        } else if (status == AnimationStatus.dismissed) {
+          controller.forward();
+        }
+      });
+
+    controller.forward();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: BoxConstraints(maxWidth: widget.maxWidth),
+      height: widget.height,
+      width: widget.width,
+      decoration: BoxDecoration(
+        gradient: widget.animated ? LinearGradient(
+          begin: Alignment.centerLeft,
+          end: Alignment.centerRight,
+          stops: [0.0, animation.value, 1.0],
+          colors: const [Color.fromARGB(255, 200, 200, 200), Color.fromARGB(255, 230, 230, 230), Color.fromARGB(255, 200, 200, 200)],
+        ): null,
+        color: widget.animated ? null : const Color.fromARGB(255, 200, 200, 200),
+        borderRadius: const BorderRadius.all(Radius.circular(8)),
+      ),
+    );
+  }
+}