Temporary placeholder before the embed loads.

This prevents the content from jumping around
sul-dlss · Dec 4, 2023 · 842edf8 · 842edf8
1 parent 012dfa7
commit 842edf8
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/app/views/purl/_embed.html.erb b/app/views/purl/_embed.html.erb
@@ -1,4 +1,8 @@
 <%= tag.div data: { controller: 'oembed', oembed_url_value: embeddable_url(@purl.druid) } do %>
+  <svg width="100%" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
+    <title>Placeholder</title>
+    <rect width="100%" height="100%" fill="#868e96"></rect>
+  </svg>
   <a class="purl-embed-viewer embed" href="<%= embeddable_url(@purl.druid) %>" data-oembed-provider="<%= oembed_provider_url %>">Show Content</a>
 <% end %>
 <noscript>