0

I'm writing an app in Rails 7 (was working only on lower versions before, <= 5 ) and I encountered a weird assets behavior. There is a delay in applying assets. I have multiple link_to's with remote: true option and when the page is reloaded and i click on link too early it behaves like normal link (not remote) and sends html request (not js). The delay is very significant, I encounter this problem very often. There's also a visible delay in applying css - I can see unstyled page for 0.5/1 second and then styles appear. Images also renders very slowly, but that's maybe because they are in quite high resolution.

Here's some code:

importmap.rb

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.2.1/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.6/lib/index.js"
pin "chosen-jquery", to: "chosen-jquery"
pin "flatpickr", to: "flatpickr"

pin_all_from "app/javascript/custom", under: "custom"

application.js

import "@hotwired/turbo-rails"
import "controllers"
import "jquery"
import "jquery_ujs"
import 'bootstrap'
import 'chosen-jquery'
import 'flatpickr'

import "custom/choosen"
import "custom/datepicker"
import "custom/login_banner"
import "custom/mobile_menu"
import "custom/forms"

one of js files for example

window.form_small_img_display = function() {
  $("#user_avatar").change(function(){
    const [file] = this.files
    if (file) {
      $(this).closest(".form-img-display-js").find("img.small-form-img-js").attr("src", URL.createObjectURL(file))
      // $("img.small-form-avatar").attr("src", URL.createObjectURL(file))
    }
  })
};

window.close_inline_form = function(){
  $(".close-inline-form-js > a").on("click", function(e){
    e.preventDefault();

    $(".inline-expedition-logs-form").html("");
  })

  $(".close-inline-update-form-js > a").on("click", function(e){
    e.preventDefault();

    parent = $($(this).data('id')).parent();
    $($(this).data('id')).remove();
    parent.prepend($(this).data('partial'))

  })
}

$(document).on('turbo:load', window.form_small_img_display);
$(document).on('turbo:load', window.close_inline_form);

manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link chosen-jquery.js
//= link flatpickr

application.html.erb layout is not changed for js

I'm not very familiar with the new approach to js in rails 7, so I'm not sure what to do with that, if even I can do anything about it. Maybe it's just on my local machine. My only suspicion is that the images are too large and take a long time to load, which slows down the loading of the js. I'm just curious why it applies to the remote: true option.

jakub_pietrzyk
  • 13
  • 3
  • I can't be sure what exactly causes your problem but I believe that the code is very dependent of lots of libraries. Maybe you could `defer` part of it and `preload` less of it. so the browser doesn't clog up. Check the developer tools' network tab to see how its performing to see if some improvement can be done. If possible, you could strip out jquery from your code and lazy loading images. – Lomefin Dec 20 '22 at 05:00
  • Not related to what you're asking, but if you're not comfortable with importmaps, you should checking out esbuild. – Ashvith Shetty Dec 20 '22 at 08:42
  • Remote forms are provided by UJS. You have `jquery_ujs` in your `application.js`. You could experiment with replacing it with `@rails/ujs`. The default with Rails 7 is to use turbo instead of remote forms, though. See this answer on how to install @rails/ujs: https://stackoverflow.com/a/70769655/2186942 Here are some reasons for changing from jquery_ujs to the rails version: https://dev.to/nejremeslnici/migrating-from-jquery-ujs-to-rails-ujs-k9m – Jussi Hirvi Dec 20 '22 at 16:06
  • okay, I've figured out that the delay was so significant due to the size of the photos. Anyway there's still a slight delay. It seems like the html with css is loading 0.5 second before js is applied. Its a problem for me because for exaple there's a iritating styles change on selects when the js library is applied. In the older apps where I use window.load there's not such a problem and when I reload, the page is shown with js already applied (but I found out that the loading time is much longer) – jakub_pietrzyk Mar 08 '23 at 19:30

0 Answers0