Tạo loading page như youtube cho 1 rails app

Khi mới làm quen với rails, chắc hẳn các bạn sẽ thấy 1 điều khá lạ là khi bạn click vào 1 link để chuyển trang, và nếu việc load data là khá lâu, có thể 2s, 3s hoặc hơn. Tuy nhiên trong thời gian trang kế tiếp chưa load xong, thì bạn vẫn ở trang hiện tại, và chả có action gì để bạn biết là bạn vừa click vào link để load trang khác, hay bạn vừa click hụt

Có khá nhiều cách giải quyết vấn đề này, hôm nay mình xin đưa ra 1 giải pháp đơn giản và khá hiệu quả:

Tạo loading page như youtube với gem "nprogress-rails"

Việc sử dụng gem khá đơn giản

Trong Gemfile

gem 'nprogress-rails'

và chạy bundle

bundle install

trong application.js

//= require nprogress
//= require nprogress-turbolinks

và application.css.scss

*= require nprogress
*= require nprogress-bootstrap

OK, bây giờ web của bạn khi loading sẽ như thế này

Bạn có thể custom lại thanh loading cho phù hợp với nhu cầu của bạn

Thêm đoạn JS để enable hay disable phần loading vòng tròn bên phải

Nếu disable:

NProgress.configure({
  showSpinner: false
});

Nếu bạn muốn change style cho thanh loading nằm ngang, bạn override lại css cho "#nprogress .bar"

ví dụ:

#nprogress .bar {
  color: red;
  background: red;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  awidth: 50%;
  height: 10px;
  box-shadow: 0 0 10px #29d, 0 0 5px red;
}

Lúc này thanh loading ngang của bạn sẽ như:

Có vẻ hơi xấu, nhưng muốn chỉ rõ là bạn đã custom được thanh loading ngang. Bạn hãy custom lại cho đẹp theo ý mình nhóe