Add loading spinner component taken from vita-min

Author: Nick Edwards

app/assets/images/loading.svg

@@ -57,5 +57,6 @@
 @import "./components/forms.css";
 @import "./components/buttons.css";
 @import "./components/icons.css";
+@import "./components/loading.css";
 
 @import "./utilities/state.css";

app/assets/stylesheets/cfa_ui_components/cfa_ui_components.tailwind.css

@@ -0,0 +1,5 @@
+.loading-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}

app/assets/stylesheets/cfa_ui_components/components/loading.css

@@ -0,0 +1,3 @@
+<div class="loading-container">
+  <%= image_tag "loading.svg", alt: "" %>
+</div>

app/components/loading_component.html.erb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class LoadingComponent < BaseComponent
+  def initialize(html_attrs: nil)
+    super
+  end
+end

app/components/loading_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class LoadingComponentTest < ViewComponent::TestCase
+  def test_renders_loading_container
+    render_inline(LoadingComponent.new)
+    assert_selector "div.loading-container"
+  end
+
+  def test_renders_loading_image
+    render_inline(LoadingComponent.new)
+    assert_selector "div.loading-container img[alt='']"
+  end
+end

test/components/loading_component_test.rb

@@ -0,0 +1,5 @@
+class LoadingComponentPreview < ViewComponent::Preview
+  def default
+    render(LoadingComponent.new)
+  end
+end