ウェブサイトで画像の読み込みやajaxでのデータ取得などを処理する場合、ノータイムでの表示は理想的ですが、どうしても多少なりとも時間がかかります。

そういった場合には、処理をしているということを知らせるローディングを実装することで、ユーザーのストレスを軽減することが出来ます。
(特にフィルタリングで画面がフリーズしたような状況に出くわすとストレスたまります)

考えてみましょう。
飲食店で「営業中」や「準備中」などのプレートを見たことはあると思います。
もし、これが何もなかったらお店に躊躇せずに入ろうと思いますか？
これと同様で、ユーザーに状態を知らせないと「動かない」などでサイトから離脱することもあります。
これらを少しでも防ぐために、描画レンダリングなどの処理中はローディングを実装することをおすすめします。

ローディングは大きく分けて3種類あります。

テキストローディング

一番簡単なのが、テキストで現在ローディングをしていることを伝える方法になります。
使い勝手がよくページ全体のローディングを行っているときや、スピナーなどとの組み合わせをすることで視覚的に分りやすいです。

See the Pen Loading-01 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

See the Pen Loading-02 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

See the Pen Loading-03 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

スピナー

画像の読み込みなどでよく見かけるくるくる回るローダーをスピナーと言います。
画像の読み込みや、エリアの更新などでよく使います。

See the Pen loading-04 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

See the Pen Loading-05 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

See the Pen Loading-06 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

プログレスバー

ファイルのアップロードなどの場合はスピナーよりはプログレスバーを使うことによって、後どれくらいで完了するのかを明示すると分りやすいです。
HTML5のFile(File Reader) APIを使うことでフロントエンドでの実現も可能です。
※File APIは一部のブラウザでは動作しないので要注意

プログレスバーはイージングを付ける必要はなく、linearで一定のスピードにしておくことがよいです。

See the Pen Progress Bar 01 by Nobuyuki Kondo (@artprojectteam) on CodePen.0

冒頭でも述べたように、なるべく処理に時間がかからないようにするのが先決ですが、どうしても時間がかかる場合は、ローディングを実装することでユーザーのストレスや離脱を少しでも防げるようにしましょう。

逆に時間がかからない場合(フィルタリングでもShow/Hideを切り替えるだけだったりとか)には実装してしまうと、うざいのでやめましょう。