From f4b313ae299c75ffa9c10c1b61a48994026eee58 Mon Sep 17 00:00:00 2001
From: Nathaniel <73431750+nyakotey@users.noreply.github.com>
Date: Wed, 14 Sep 2022 08:10:27 +0000
Subject: [PATCH] edit: invalid input error message, loader

---
 css/style.css | 6 +++++-
 js/script.js  | 7 +++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 25308da..0feeb9f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -136,8 +136,12 @@ body {
     scroll-snap-type: y mandatory;
 }
 
+.loader {
+    color: #aaaaaabb;
+}
+
 .country {
-    width: min(75vmin,290px);
+    width: min(75vmin, 290px);
     display: flex;
     /*! flex: 0 0 max-content; */
     gap: 0.8rem;
diff --git a/js/script.js b/js/script.js
index 8b0a3e9..b1f4510 100644
--- a/js/script.js
+++ b/js/script.js
@@ -166,7 +166,9 @@ function generateHtml(mainData, externalInfo = [{}], city = {}, query = "+XXX")
 
 async function response() {
     hideInfoPane();
-    const loadingHtml = "<div style='color: #aaaaaabb;'>loading...</div>";
+    const loadingHtml = `<div class="loader">
+    <i class="fas fa-magnifying-glass search-icon"></i> &nbsp;Searching...
+    </div>`;
     render(output, loadingHtml);
 
     let query = getQuery();
@@ -208,6 +210,7 @@ function hideInfoPane() {
 
 
 async function tests() {
+    hideInfoPane();
     render(output, "<b style='color:#ccc'>testing...</b>");
 
     const testRandomCountry = () => {
@@ -227,7 +230,7 @@ async function tests() {
 
 // main
 const err = {
-    invalidInput: `<div class="error">Please revise your input</div>`,
+    invalidInput: `<div class="error">Input is empty or in a wrong format</div>`,
     notFound: `<div class="error">Not found</div>`,
     oops: `<div class="error">Oops an error occurred</div>`,
 }