So I have this Recipe Search App and whenever I'm opening new Recipe and it's loading I'm trying to add loading spinner, but for some reason it's not showing.

Here is the controller part where recipe is being loaded and renderSpinner is being called

    const controlRecipes = async function () {
  try {
    const id = window.location.hash.slice(1);
    if (!id) return;
    recipeView.renderSpinner(); // <--- Spinner Load
    //1.Loading Recipe
    await model.loadRecipe(id); //<--- Recipe Loaded
    recipeView.render(model.state.recipe);
  } catch (err) {
    recipeView.renderError();
  }
};

This is where it's being called with event listeners.

const init = function () {
  recipeView.addHandlerRender(controlRecipes);
  searchView.addHandlerSearch(controlSearchResults);
};
init();

This is the addHandler

  addHandlerRender(handler) {
    window.addEventListener('hashchange', handler);
    window.addEventListener('load', handler);
  }

And finally, this is the renderSpinner.

renderSpinner() {
const markup = `<div class="spinner">
        <svg>
          <use href="${icons}_icon-loader"></use>
        </svg>
      </div>`;
this._parentElement.innerHTML = '';
this._parentElement.insertAdjacentHTML('afterbegin', markup);


}

RenderSpinner is located not in the recipeView.js but in the View.js but I have extended recipeView to View.js and imported View.js

import View from './View.js';
class RecipeView extends View {
  _parentElement = document.querySelector('.recipe');
 

And exported view.js like this

export default class View {

So now whenever I call recipeView.renderSpinner it gets it from View.js and attributes _parentElement to the recipeView parentElement. Please help me identify why it's not loading. It was working before but after some changes in code it doesn't work and I can't understand why.