оптемезируй
// main.js
document.addEventListener('DOMContentLoaded', () => {
  const loader = document.getElementById('loader');
  const loaderTextTop = document.getElementById('loader-text-top');
  const loaderTextBottom = document.getElementById('loader-text-bottom');
  const content = document.getElementById('content');

  let currentPageStyles = null; // Ссылка на текущий CSS файл

  // Функция для отображения загрузочного экрана с текстами
  function showLoader(textTop, textBottom) {
    loaderTextTop.textContent = textTop || '';
    loaderTextBottom.textContent = textBottom || '';
    loader.style.display = 'flex';
  }

  // Функция для скрытия загрузочного экрана
  function hideLoader() {
    loader.style.display = 'none';
  }

  // Функция для динамической загрузки скрипта с возвратом Promise
  function loadScript(page) {
    return new Promise((resolve, reject) => {
      // Находим все скрипты с id 'page-script' и удаляем их
      const existingScripts = document.querySelectorAll('#page-script');
      existingScripts.forEach((script) => script.remove());

      // Создаем новый скрипт
      const script = document.createElement('script');
      script.src = `${page}.js`;
      script.id = 'page-script';

      // Обработчик загрузки скрипта
      script.onload = () => {
        resolve();
      };

      // Обработчик ошибок загрузки
      script.onerror = () => {
        reject(new Error(`Ошибка загрузки скрипта: ${page}.js`));
      };

      // Добавляем скрипт в документ
      document.body.appendChild(script);
    });
  }

  // Функция для динамической загрузки CSS файла
  function loadStylesheet(page) {
    return new Promise((resolve, reject) => {
      // Удаляем предыдущий CSS файл, если он существует
      if (currentPageStyles) {
        currentPageStyles.remove();
        currentPageStyles = null;
      }

      // Создаем новый link элемент для CSS
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = `${page}.css`;
      link.id = `${page}-css`;

      // Обработчик загрузки CSS
      link.onload = () => {
        resolve();
      };

      // Обработчик ошибок загрузки CSS
      link.onerror = () => {
        reject(new Error(`Ошибка загрузки CSS файла: ${page}.css`));
      };

      // Добавляем CSS в head
      document.head.appendChild(link);
      currentPageStyles = link;
    });
  }

  // Функция-обработчик клика
  async function handleElementClick(element) {
    const page = element.getAttribute('data-page');
    const loaderTop = element.getAttribute('data-loader-top');
    const loaderBottom = element.getAttribute('data-loader-bottom');

    if (!page) {
      console.warn('Элемент не имеет атрибута data-page');
      return;
    }

    try {
      // Отображаем загрузочный экран с переданными текстами
      showLoader(loaderTop, loaderBottom);
      // Загрузить CSS для страницы
      await loadStylesheet(page);
      // Загрузить JS для страницы
      await loadScript(page);

      // Предполагаем, что загруженный скрипт включает функцию для рендеринга
      if (typeof renderPage === 'function') {
        console.log('рендер');
        await renderPage(); // Ждём выполнения рендеринга
      } else {
        console.warn(`Функция renderPage не определена в ${page}.js`);
      }

      hideLoader();
    } catch (error) {
      hideLoader();
      content.innerHTML = `<p>${error.message}</p>`;
      console.error(error);
    }
  }

  // Обработчик событий клика с использованием делегирования
  document.addEventListener('click', (event) => {
    // Проверяем, содержит ли кликнутый элемент или его родитель нужный атрибут
    const target = event.target.closest('[data-page]');
    if (target) {
      event.preventDefault();
      handleElementClick(target);
    }
  });

  // Обработчик событий клавиатуры для доступности (Enter)
  document.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
      const target = event.target.closest('[data-page]');
      if (target) {
        event.preventDefault();
        handleElementClick(target);
      }
    }
  });

  // Функция для автоматической загрузки страницы main_menu один раз
  function loadInitialPage() {
    // Создаём виртуальный элемент с необходимыми атрибутами
    const initialElement = document.createElement('button');
    initialElement.setAttribute('data-page', './bin/js_page/menu/main_menu');
    initialElement.setAttribute('data-loader-top', 'Загрузка Страницы 3');
    initialElement.setAttribute(
      'data-loader-bottom',
      'Пожалуйста, подождите...'
    );
    // Вызываем обработчик клика для этого элемента
    handleElementClick(initialElement);
  }

  // Вызываем функцию загрузки начальной страницы
  loadInitialPage();
});