Nested frames - are they a good idea?

1

I have more a philosophical/architectural question on how to bulid frames on larger project. My question is “are Nested turbo frames a good idea ?”

e.g.:

<turbo-frame id="main">
  <turbo-frame id="login">
  </turbo-frame>
</turbo-frame>

Let say I have a login frame with a login form that may pop in multiple places trough out the app when you are not logged and you click edit. Then there is the login dedicated page to login or signup where the login form is just a part

<turbo-frame id="main">
  <h1> wecome to login page</h1>
  <p> hello friend, please try to login or create new account</p>

  <turbo-frame id="login">
    <form> ...</form>
  </turbo-frame>
</turbo-frame>

Once you loggin the respond will be just contain the upper main frame (no login frame)

<turbo-frame id="main">
    Hello #{@account.title} How are you
</turbo-frame>

Is this generally considered good/ok practice or Bad practice ?

If good practice then how many nested frames are the limit ?

Question 2 (maybe bug)

I’ve also noticed that there are some situations with turbo-rails where this don’t work. I have no idea why but it seems that because I’m not updating the bottom frame (login frame) it seems Turbo don’t pick up there is a main frame in the response that it can update. Exactly the same nested frame setup works in other places

Any idea why this may be ? I’m 100% sure the HTML response contain the main frame.

full code from Rails app:

the flow is that user enters email (1st step), he/she receives a verification code that he/she enters in step 2, and then he/she ends up on Account page (step 3)

first 2 steps will display correctly but on step 3 the account page will not display in the main frame

step 1

= turbo_frame_tag 'main' do
  h4 Please login

  = turbo_frame_tag 'login' do
    = form_with(model: @email_identity, url: email_identity_logins_path, method: :post  ) do |f|
      .input-field
        = f.email_field :email, class: 'validate', data: { target: "autofocus.input" }
        = f.label :email

      .input-field
        = f.button 'ok', class: 'btn'

step 2

= turbo_frame_tag 'main' do

  h4 Please enter login code

  = turbo_frame_tag 'login' do
    = flash_div
    = form_with(model: @email_identity, url: email_identity_login_codes_path(@email_identity), method: :post ) do |f|
      .input-field
        = f.label :code
        = f.text_field :code, data: { target: "autofocus.input" }

      .input-field
        = f.button 'ok', class: 'btn'

step 3

= turbo_frame_tag 'main' do
   p Hello #{@account.title} How are you
2

Conceptually, I think nested turbo frames are good.

Suppose you have a comments thread you want to lazy load. You put in a turbo frame (with a src attribute). At the bottom of the thread, you have a button to “Add a comment” and when you click that, it expands to give you a box to write your comment. That could be a turbo frame too: have a link to comments/new and return the form inside the frame.

I’m struggling to think of a use case where you’d have more than two nested frames. Would be interested if anyone else can :thinking:

As for your example, I’m not sure I follow. Why do you need frames at all? Is it because the login prompt comes up in a modal or something?

On your second question, have you noticed any patterns for when the main frame won’t update? Like, for example, is it when you submit the login form?