diff --git a/lookbook/previews/op_primer/inline_macro_component_preview.rb b/lookbook/previews/op_primer/inline_macro_component_preview.rb
index e85da14dd5c4..0fb84a4c0e1b 100644
--- a/lookbook/previews/op_primer/inline_macro_component_preview.rb
+++ b/lookbook/previews/op_primer/inline_macro_component_preview.rb
@@ -47,6 +47,10 @@ def playground(text: "InlineMacroComponent", icon: nil)
       end
     end
 
+    def loading_content
+      render_with_template
+    end
+
     def with_link
       render_with_template
     end
diff --git a/lookbook/previews/op_primer/inline_macro_component_preview/loading_content.html.erb b/lookbook/previews/op_primer/inline_macro_component_preview/loading_content.html.erb
new file mode 100644
index 000000000000..fdbef244ba80
--- /dev/null
+++ b/lookbook/previews/op_primer/inline_macro_component_preview/loading_content.html.erb
@@ -0,0 +1,10 @@
+<p>
+  When the content is not fully loaded yet, best use a spinner and muted text to indicate it:
+
+  <%= render(OpPrimer::InlineMacroComponent.new) do |c| %>
+    <% c.with_leading_visual_icon(icon: :book) %>
+
+    <%= render(Primer::Beta::Spinner.new(size: :small, display: :flex, mr: 2, sr_text: "")) %>
+    <%= render(Primer::Beta::Text.new(color: :muted)) { "Loading…" } %>
+  <% end %>
+</p>