Weird behavior where partial is getting rendered instead of component

[luizkowalski]

Hey 👋🏻

I'm seeing something so weird that it is making me question my sanity! It goes like this: I had a partial file that was linked to a Stimulus controller and would toggle a spinner/loader (however you want to call it) while a Turbo request it being made, something like this:

views/loader/_component.html.erb

<%= content_tag(:div, data: { controller: "loader" }, class: "#{extra_classes}") do %>
  <%= content_tag(:div, role: "status", class: "hidden", data: { loader_target: "loader"}) do %>
    <div class="animate-spin inline-block w-10 h-10 border-[3px] border-current border-t-transparent dark:text-red-700 text-blue-700 rounded-full" role="status" aria-label="loading">
      <span class="sr-only">Loading...</span>
    </div>
  <% end %>
<% end %>

loader_controller.js

export default class extends Controller {
  static targets = ["loader"];

  connect() {
    document.addEventListener("turbo:submit-start", this.toggleSpinner.bind(this));
    document.addEventListener("turbo:submit-end", this.toggleSpinner.bind(this));
  }

  toggleSpinner() {
    toggle(this.loaderTarget);
  }
}

so whenever I want a spinner, I just do render partial: loader/component

this was working perfectly fine but I wanted to turn this partial into a viewcomponent, so I simply created a LoaderComponent and copied over the .erb to the loader_component.html.erb and updated the LoaderComponent class:

loader_component.rb

# typed: true
# frozen_string_literal: true

class LoaderComponent < ApplicationComponent
  def initialize(extra_classes: nil)
    @extra_classes = extra_classes.nil? ? "mx-auto" : extra_classes
  end

  private

  attr_reader :extra_classes
end

and also updated the call from render partial... to render LoaderComponent.new. Now, suddenly, the spinner stopped showing up at all but all the divs, declarations, etc, are there in the HTML...something is off.

I added some logging on the Stimulus controller, maybe the Stimulus is not doing what it is supposed to do:

connect() {
    console.log(this.loaderTarget);
    document.addEventListener("turbo:submit-start", this.toggleSpinner.bind(this));
    document.addEventListener("turbo:submit-end", this.toggleSpinner.bind(this));
    console.log("Binded");
  }

  toggleSpinner() {
    toggle(this.loaderTarget);
    console.log(this.loaderTarget);
  }

and this is what I see in the console

so it is

1. binding the controller correctly
2. connected to the right target
3. updating the classes as it toggles the HTML component

I couldn't get this to show to save my life!

After a lot of back and forth, I ended up reverting the removal of the partial I showed in the beginning, and to my surprise, the spinner is now showing up but it is mind-boggling:

a. updating the two toperb's divs classes under the component will reflect on the spinner (e.g.removing mx-auto will make the spinner render on the left)
b. changing the colors of the inner div under the component will NOT reflect on the spinner at all
c. changing the colors of the inner div in the partial WILL reflect on the color of the spinner.
d. the partial's HTML doesn't need the two outer divs, just the inner div where the spinner is rendered.
e. an empty partial will not render the spinner

it looks like the two outer divs are coming from the component and the inner div is coming from the partial! this doesn't make any sense.

really, I have never seen this and I'm out of ideas and about to give up. tried everything possible: clear cache, incognito window, update gems, js deps, delete and redo everything

am I missing something that is so under my nose that I can't see?

[Spone]

Hi @luizkowalski! Can you provide a minimal repo where we can reproduce the most basic version of the problem?

[luizkowalski]

so, while I was building a minimal reproducible repo, I found the problem: I forgot to update the tailwind.config.js to include the components folder in the list of files to be compiled. adding "./app/components/**/*.{erb,haml,html,slim}", to the content key solved the problem

thanks a lot, you actually found the problem in a way 😂

[Spone]

Yeah that's usually a good debugging technique! Glad you found the issue 🙂