Introduce a Loading Indicator

This commit adds the HTML necessary to display a loading indicator over the map and various other controls on the page.

The indicator contains an inline-rendered <svg> element that we animate to spin indefinitely.

Future commits will add logic to dynamically hide and show the indicator by adding and removing the .is-loading CSS class.

Desktop

loading-spinner


      app/assets/images/icons/loader.svg

diff --git a/app/assets/images/icons/loader.svg b/app/assets/images/icons/loader.svg
new file mode 100644
index 0000000..5dcf9dd
--- /dev/null
+++ b/app/assets/images/icons/loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="#FFF" fill-rule="nonzero"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m0 3a9 9 0 1 1 0 18 9 9 0 0 1 0-18" opacity=".25"/><path d="M12 0c6.627 0 12 5.373 12 12h-3a9 9 0 0 0-9-9V0z"/></g></svg>


      app/views/seats/index.html.erb

diff --git a/app/views/seats/index.html.erb b/app/views/seats/index.html.erb
index 96eb878..12c3744 100644
--- a/app/views/seats/index.html.erb
+++ b/app/views/seats/index.html.erb
@@ -79,6 +79,16 @@
         </ul>
       </div>
 
+      <div
+        class="syos-frame__map-overlay syos-loader-overlay is-loading"
+        aria-hidden="true"
+        >
+        <%= inline_svg_tag(
+          "icons/loader.svg",
+          class: "syos-icon syos-icon--xlarge syos-loader-overlay__loader",
+        ) %>
+      </div>
+
       <svg
         id="map"
         xmlns="http://www.w3.org/2000/svg"