From 5ade92c78d7e7d6a9a2ef247755a46f3ae8e21fb Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Fri, 8 Jul 2022 10:30:31 +0200
Subject: [PATCH] Added the loading state

---
 ghost/sodo-search/src/components/PopupModal.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/ghost/sodo-search/src/components/PopupModal.js b/ghost/sodo-search/src/components/PopupModal.js
index 735d096f04..8082b74235 100644
--- a/ghost/sodo-search/src/components/PopupModal.js
+++ b/ghost/sodo-search/src/components/PopupModal.js
@@ -2,6 +2,7 @@ import Frame from './Frame';
 import AppContext from '../AppContext';
 import {ReactComponent as SearchIcon} from '../icons/search.svg';
 import {ReactComponent as ClearIcon} from '../icons/clear.svg';
+import {ReactComponent as CircleAnimated} from '../icons/circle-anim.svg';
 import {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {getBundledCssLink} from '../utils/helpers';
 
@@ -145,7 +146,6 @@ function SearchBox() {
                 <SearchClearIcon />
             </div>
                 
-            {/* <SearchIcon className='mr-3 text-neutral-900' alt='Search' /> */}
             <input
                 ref={inputRef}
                 value={searchValue || ''}
@@ -160,8 +160,9 @@ function SearchBox() {
                     }
                 }}
                 className='grow -my-5 py-5 -ml-3 pl-3 text-[1.65rem] focus-visible:outline-none placeholder:text-gray-400 outline-none'
-                placeholder='Search posts, tags, authors..'
+                placeholder='Search posts, tags, authors...'
             />
+            <Loading />
             <CancelButton />
         </div>
     );
@@ -185,6 +186,12 @@ function SearchClearIcon() {
     );
 }
 
+function Loading() {
+    return (
+        <CircleAnimated className='shrink-0' />
+    );
+}
+
 function CancelButton() {
     const {dispatch} = useContext(AppContext);