Adding animate.css to my layout file slows dev server down to a crawl

Question

When I add animate.css to application.scss file that is used in my layouts file, the load time (dev) is very very slow to the point the page doesn't render.

If I remove animate.css then it is fast and works like normal.

@import
  "bootstrap.scss",
  "animate.scss"

What could the issue be here?

Update My gemfile as requested:

source 'https://rubygems.org'

gem 'rails', '4.2.5'
gem 'pg', '~> 0.15'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'puma'
gem 'annotate'
gem 'mailgun-ruby' #, '~>1.0.5', require: 'mailgun'
gem 'bcrypt', '~> 3.1.7'
gem 'sidekiq'
gem 'stripe'
gem "redis"
gem "config"

gem 'platform-api' # heroku
gem "aws-sdk"

gem "backport_new_renderer"

group :development, :test do
  gem 'byebug'
  gem 'rspec-rails'
  gem 'factory_girl_rails', '~> 4.5'
  gem 'shoulda'
  gem 'capybara'
  gem 'launchy'
  gem 'database_cleaner'
end

group :development do
  gem 'web-console', '~> 2.0'
  gem 'spring'
  gem 'quiet_assets'
end

group :test do
   gem 'database_cleaner'

end

Answer 1

This should work:

 @import
   "bootstrap",
   "animate"

Or this:

@import "bootstrap";
@import "animate";

Remove the .scss extension from the imported files, as you already imported them in application.scss

Check once again if you renamed the application.css to application.scss. If not quick jump to command line will do the trick:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

UPDATE

---

If you look up the line below in app/config/environment/development.rb :

  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.

  config.assets.debug = true

Debugging of assets is set to true by default, and disables concatenation and preprocessing of assets. One of the reasons why your page was slow is that your particular page has a lot of assets and browser does huge amount of requests to download them. If you change to false :

config.assets.debug = false

All assets will be bundled into files like application.css and application.js and it will significantly increase the speed of the page loading, but at the other hand you won't have debugging mode enabled for assets.

EDIT (Following up the comments)

---

It will be good if you can send me the repository of your project if it's possible, so that I can try and isolate the problem. I tried and installed a bare Rails app, from the Gemfile you provided, and I didn't have problems importing animate after bootstrap.

I loaded 200 records in my DB, and I added font-awesome on top, and the page was loaded in 401 ms. (all extensions from Google chrome were disabled) With all Google chrome extensions enabled, the loading time was doubled! Although I didn't have many HTML lines of code which can significantly increase loading time.

I will give you a couple of helpful insights, what and where to look for:

I'm using Google chrome dev-tools (F12 key):

• You can check in network card of dev tools if the cache is disabled or not. In my case if I disable it will increase loading time almost double.
• Click on Timeline card of dev tools: ( This is very important to find bottleneck ) Here you can monitor, isolate and trace the problem of script loading, rendering, idle time etc..
• Google extensions and widgets can slowdown the page loading of your app. I would suggest to disable them, while you are trying to locate the problem.

Back to your application, and problem by adding animate.scss to your application manifest file:

• Again it depends how many styles you have in your application, and also depends on your HTML code, a lot.

  • This can make a difference for a large project. ( More complex projects rapidly start bottlenecking in compilation )

  • Check if you have require directives with @import in your manifest file. The sprocket directives, as well as Sass’s @import, do not validate, nor care, if the file being imported has or has not been previously imported.

I hope it helps.