как страница index только загрузилась 1 раз должно произайти события data-page="./bin/js_page/menu/main_menu" data-loader-top="Загрузка Страницы 3" data-loader-bottom="Пожалуйста, подождите..." 
// 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);
            }
        }
    });
});
<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Динамическая загрузка страниц</title>
 <style>
body {
  padding: unset;
  margin: unset;
  position: relative;
  overflow: hidden;
  background: black;
}
</style>
    <!--<link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="loader.css">
</head>
<body>
    <!-- Загрузочный экран -->
    <div id="loader">
        <div class="loader-content">
            <div id="loader-text-top" class="loader-text"></div>
            <div class="spinner"></div>
            <div id="loader-text-bottom" class="loader-text"></div>
        </div>
    </div>
    <!-- Навигация -->
    <nav>
        <button data-page="./bin/js_page/map/global" data-loader-top="Загрузка Страницы 1" data-loader-bottom="Пожалуйста, подождите...">Страница 1</button>
        <button data-page="./bin/js_page/map/mini" data-loader-top="Загрузка Страницы 2" data-loader-bottom="Подготовка данных...">Страница 2</button>
        <button data-page="./bin/js_page/menu/main_menu" data-loader-top="Загрузка Страницы 1" data-loader-bottom="Пожалуйста, подождите...">Страница 3</button>
    </nav>

    <!-- Контейнер для динамического контента -->
    <div id="content">
        <h1>Добро пожаловать!</h1>
        <p>Выберите страницу для просмотра.</p>
    </div>

    <script src="main.js"></script>
</body>
</html>