Why doesn't the turbo_frame_tags content of Rails Turbo appear in the webpage?

Question

I'm following Hotwire's official instructable(https://hotwired.dev/#screencast), trying to test Rails Turbo's sorting functionality. However, I found that some content wrapped by turbo_frame_tag will not be displayed in the page

this is in app\views\rooms\show

<%= turbo_frame_tag "new_messages" , src: new_room_message_path(@room), target: "_top" %>

Are there any necessary settings that are not mentioned in the instructional video?

Answer 1

Using a turbo-frame with the src attribute will replace the inner html of the turbo-frame with the content from the URL you specified and the turbo-frame with a matching id. So you can use this to show loading UI for content that will be loaded from the url.

<turbo-frame id="long-calculation" src="/long-calculation">
  <i class="fa fa-spinner fa-spin"> </i> # Will get replaced with the results from the `/long-calculation` page
</turbo-frame>