Docs: Use rack-mini-profiler for profiling ViewComponent rendering (#1994)

* adding documentation on configuring rack-mini-profiler to use render.view_component notifications

* adding htcarr3 to contributors

* updating changelog to show rack-mini-profiler documentation changes

* fix linting issues for ci

* Apply suggestions from code review

---------

Co-authored-by: Joel Hawksley <[email protected]>

Author: htcarr3

docs/CHANGELOG.md

@@ -10,6 +10,10 @@ nav_order: 5
 
 ## main
 
+* Document using rack-mini-profiler with ViewComponent.
+
+    *Thomas Carr*
+
 * Move dependencies to gemspec.
 
     *Joel Hawksley*

docs/guide/instrumentation.md

@@ -34,3 +34,21 @@ end
 When using `render.view_component` with `config.server_timing = true` (default in development) in Rails 7, the browser developer tools display the sum total timing information in Network > Timing under the key `render.view_component`.
 
 ![Browser showing the Server Timing data in the browser dev tools](../images/viewing_instrumentation_sums_in_browser_dev_tools.png "Server Timing data in the browser dev tools")
+
+## Viewing instrumentation breakdowns in rack-mini-profiler
+
+The [rack-mini-profiler gem](https://rubygems.org/gems/rack-mini-profiler) is a popular tool for profiling rack-based Ruby applications.
+
+To profile ViewComponent rendering alongside views and partials:
+
+```ruby
+# config/environments/development.rb
+# Profile rendering of ViewComponents
+Rack::MiniProfilerRails.subscribe("render.view_component") do |_name, start, finish, _id, payload|
+  Rack::MiniProfilerRails.render_notification_handler(
+    Rack::MiniProfilerRails.shorten_identifier(payload[:identifier]),
+    finish,
+    start
+  )
+end
+```

docs/index.md

@@ -216,6 +216,7 @@ ViewComponent is built by over a hundred members of the community, including:
 <img src="https://avatars.githubusercontent.com/thomascchen?s=64" alt="thomascchen" width="32" />
 <img src="https://avatars.githubusercontent.com/milk1000cc?s=64" alt="milk1000cc" width="32" />
 <img src="https://avatars.githubusercontent.com/aduth?s=64" alt="aduth" width="32" />
+<img src="https://avatars.githubusercontent.com/htcarr3?s=64" alt="htcarr3" width="32" />
 
 ## Who uses ViewComponent?