From 54afec58a31ff563d4ba1a96538d81b8ef9407ec Mon Sep 17 00:00:00 2001
From: Kerollmops <clement@meilisearch.com>
Date: Sun, 12 Jul 2020 11:34:48 +0200
Subject: [PATCH] Add a fade in out animation when the server process

---
 public/script.js |  2 ++
 public/style.css | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/public/script.js b/public/script.js
index acb8cbf70..3e4d4f543 100644
--- a/public/script.js
+++ b/public/script.js
@@ -16,6 +16,7 @@ $('#search').on('input', function () {
       let numberOfDocuments = httpResults.data.length;
       count.innerHTML = `${numberOfDocuments}`;
       time.innerHTML = `${timeSpent}ms`;
+      time.classList.remove('fade-in-out');
 
       for (element of httpResults.data) {
         const elem = document.createElement('li');
@@ -49,6 +50,7 @@ $('#search').on('input', function () {
     beforeSend: function () {
       if (request !== null) {
         request.abort();
+        time.classList.add('fade-in-out');
       }
     },
   });
diff --git a/public/style.css b/public/style.css
index d2bb0a4a7..b490b88ea 100644
--- a/public/style.css
+++ b/public/style.css
@@ -68,3 +68,13 @@ em {
   padding-left: 10px;
   color: rgba(0,0,0,.9);
 }
+
+@keyframes fadeInOut {
+  0% { opacity: 1; }
+  30% { opacity: 0.3; }
+  100% { opacity: 1; }
+}
+
+.fade-in-out {
+  animation: fadeInOut ease 1s infinite;
+}