Add a preview for the custom loading indicator

Author: bsatarnejad

previews/primer/open_project/filterable_tree_view_preview.rb

@@ -123,6 +123,13 @@ def async(select_variant: :single)
         })
       end
 
+      # @label Async (with custom loading indicator)
+      #
+      # Demonstrates replacing the default skeleton loader with arbitrary content.
+      def async_custom_loading_indicator
+        render_with_template
+      end
+
       # @label Async (with server-side highlighting)
       #
       # Demonstrates `show_search_highlighting: false`: the client skips its own highlight logic

previews/primer/open_project/filterable_tree_view_preview/async_custom_loading_indicator.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(
+  src: primer_view_components.filterable_tree_view_items_tree_path(select_variant: :single)
+)) do |tree_view| %>
+  <% tree_view.with_loading_indicator do %>
+    <%= render(Primer::Alpha::Stack.new(align: :center, p: 3)) do %>
+      <%= render(Primer::Beta::Spinner.new) %>
+    <% end %>
+  <% end %>
+<% end %>