Why it's so slow with Rails 5, gem from this github (master) and a default new app?

[mrkongo]

It's my first time with SemanticUI.

I installed rails 5 with docker (ruby image), everything good, I tried this gem: https://github.com/doabit/semantic-ui-sass and it loads everything fast end good.

But with this gem (which I would like to choose because of customization, i.e. Google Fonts which I don't want in my project) everything is so slow... very very slow... Everytime I change something in vendor/.../site.variables it takes minutes(!!!!!) to reload pages.

Chrome, rails 5, docker, mac os new and speedy!, nothing else (gem or anything)... Why?

I'm not a newbie at all...

UPDATE If I restart the server it take just the first time many many many seconds (I think for make the css from the less). It can be done just one time from me and then loaded every time without using gems?

[daveharris]

I have found this also. Just normal page refreshing (after changing noting) is also incredibly frustratingly slow - like 2000ms response time.

I've used Scout's devtrace to identify where the slow time is, and according to this trace, 95+% of the time is spend in 'page rendering', which I assume is in asset complication. Remove the stylesheet and javascript imports from app/views/layouts/application.html.erb and see for yourself...

I've resorted 2 (bad options):

1. When I'm not making CSS changes, in config/environments/development.rb I set config.assets.debug = false and then run rake assets:clobber assets:precompile. This means that it functions like production and doesn't compile assets on each request
   • Pro: You get CSS with customisations built-in. I'm getting response times in the 50ms range...
   • Con: Any CSS change you make requires rake assets:clobber assets:precompile && rails server. Urgh
2. Download https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css to vendor/assets/stylesheets/. Replace the *= require semantic_ui/semantic_ui with *= require semantic.min.css.
   • Pro: You can still make other CSS changes
   • Con: Any customizations in /vendor/assets/stylesheets/semantic_ui/**/*.variables and /vendor/assets/stylesheets/semantic_ui/**/*.overrides are not included. If it's just colors then maybe no big deal for simple development.

I would be really interested to know what a more 'mature' rails library like twbs/bootstrap-rubygem get around this issue.

If anyone else has good options, I'm all ears!!!!

[eveevans]

Anyone in 2020 having this problem ? How did you solved it ?

[daveharris]

@eveevans Wow I can't believe I posted 1.5 years ago. This project doesn't seem to be active anymore. No I haven't solved it.

I plan on side-stepping these issues entirely and move to the supported https://github.com/fomantic/Fomantic-UI - and just use gulp as an external built tool to create your version of the project with your variables applied, and then just include the minified css/js in your rails project.

[daveharris]

@eveevans You could also go down @brendon's approach of installing it inside Webpacker if you are using Rails 6. See https://github.com/Semantic-Org/Semantic-UI-Rails-LESS/pull/49#issuecomment-470343037

[brendon]

100% @daveharris, I wouldn't recommend using this gem anymore. It's almost guaranteed to never get updated due to dependency hell.

[eveevans]

Thanks @daveharris I just chat with @brendon on other Issue about the same dead project thing.

I'll go for the Webpacker approach (Which you could use on Rails 4 and 5, not just 6).