Show preloader element while waiting for server response using FETCH

Question

I don't get to see my preloader before requested data is displayed using fetch I've done some research and my showLoad and hideLoad show work just fine but still does not show my loader element. Any Idea on how to make it work?

let searchButton = document.getElementById('button')
let showInfo = document.getElementsByClassName('conteinerInfo')
showInfo[0].setAttribute('id', 'mainddiv')
let divId = document.getElementById('mainddiv')
let loader = document.getElementById('load')

function showLoad(){
     loader.classList.add('display')
    
}

function hideLoad(){
    loader.classList.remove('display')
}

function getWeather () { 
 
showLoad()
fetch(`http://api.weatherapi.com/v1/current.json?key=XXXXXXX&q=${input.value}&aqi=no`) 
.then(response => response.json())
.then(res => { 
    hideLoad()
   let celsius  = 'Temp' + ' ' + res.current.temp_c + " " + '°C'
divId.innerHTML =  celsius

})
} 

searchButton.addEventListener('click', getWeather)

<div class="conteinerInfo">
    <div id="load"></div>
</div>

#load{

    border: 5px solid #f3f3f3; 
    border-top: 5px solid #3498db; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin-left: 160px;
    display: none;
  }

  #load.display{
    display: block;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

Answer 1

Change

#load.display {
    display: block;
}

to

.display {
    display: block;
}