Así que tengo esta aplicación de búsqueda de recetas y cada vez que abro una nueva receta y se está cargando, trato de agregar un control giratorio de carga, pero por alguna razón no se muestra.

Aquí está la parte del controlador donde se carga la receta y se llama a renderSpinner

 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(); } };

Aquí es donde se llama con detectores de eventos.

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

Este es el addHandler

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

Y finalmente, este es el 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 no se encuentra en la vista de receta.js, sino en la vista.js, pero he extendido la vista de receta a View.js y la vista importada.js

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

Y exportó view.js así

 export default class View {

Entonces, cada vez que llamo a RecipeView.renderSpinner, lo obtiene de View.js y atribuye _parentElement a la vista de receta parentElement. Por favor, ayúdame a identificar por qué no se carga. Estaba funcionando antes, pero después de algunos cambios en el código no funciona y no puedo entender por qué.