Add test utilities and state machine diagrams for FSM models

- Introduced reusable test utilities in `backend/tests/utils` for FSM transitions, HTMX interactions, and common scenarios.
- Added factory functions for creating test submissions, parks, rides, and photo submissions.
- Implemented assertion helpers for verifying state changes, toast notifications, and transition logs.
- Created comprehensive state machine diagrams for all FSM-enabled models in `docs/STATE_DIAGRAMS.md`, detailing states, transitions, and guard conditions.

backend/templates/htmx/components/loading_indicator.html

@@ -1,3 +1,33 @@
-<div class="htmx-loading-indicator" aria-hidden="true">
-  <div class="spinner">Loading…</div>
+{% comment %}
+Loading Indicator Component
+
+Displays a loading spinner for HTMX requests.
+
+Optional context:
+  - size: 'sm', 'md', or 'lg' (defaults to 'md')
+  - inline: Whether to render inline (defaults to false)
+  - message: Loading message text (defaults to 'Loading...')
+  - id: Optional ID for the indicator element
+{% endcomment %}
+
+{% if inline %}
+<!-- Inline Loading Indicator -->
+<span class="htmx-indicator inline-flex items-center gap-2 {% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-lg{% endif %}"
+      {% if id %}id="{{ id }}"{% endif %}
+      aria-hidden="true">
+    <i class="fas fa-spinner fa-spin text-blue-500"></i>
+    {% if message %}<span class="text-gray-500 dark:text-gray-400">{{ message }}</span>{% endif %}
+</span>
+{% else %}
+<!-- Block Loading Indicator -->
+<div class="htmx-indicator flex items-center justify-center p-4 {% if size == 'sm' %}p-2{% elif size == 'lg' %}p-6{% endif %}"
+     {% if id %}id="{{ id }}"{% endif %}
+     aria-hidden="true">
+    <div class="flex items-center gap-3">
+        <div class="{% if size == 'sm' %}w-5 h-5{% elif size == 'lg' %}w-10 h-10{% else %}w-8 h-8{% endif %} border-4 border-blue-500 rounded-full animate-spin border-t-transparent"></div>
+        <span class="{% if size == 'sm' %}text-sm{% elif size == 'lg' %}text-lg{% else %}text-base{% endif %} text-gray-600 dark:text-gray-300">
+            {{ message|default:"Loading..." }}
+        </span>
+    </div>
 </div>
+{% endif %}