testes/js/page/Modulo_Construcao/Painel/Estrutura/load.js

// Função para verificar o ambiente do usuário
async function verificarAmbiente() {



    const tela_laod = document.getElementById('entrada_2');
    let elemento_1 = "Carregando..."
    let elemento_2;

    elemento_2 = '<canvas id="animationCanvas"></canvas>';
    tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1>' + elemento_2 + '</div>';

    // Inicia a animação após configurar o canvas
    iniciarAnimacao();

    try {


        const { response } = await Autenticao(); // Recebe o objeto com response e apiUrl
        const data = await response.json(); // Faz o parse do JSON retornado

        // Verifica se data.usuario.nome existe
        const nameuser = data?.usuario?.nome;



        const main = document.getElementById("entrada_1");

        if (main.innerHTML.trim() === "") {
            // Verificação para saber se o nome existe
            if (nameuser) {
                elemento_1 = 'Seja bem-vindo, ' + nameuser; // Se o nome estiver disponível
            } else {
                elemento_1 = 'Algo Inesperado Aconteceu !!'; // Caso o nome seja nulo ou indefinido
            }
        }


        elemento_2 = '<canvas id="animationCanvas"></canvas>';
        tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1>' + elemento_2 + '</div>';


        // Inicia a animação após configurar o canvas
        iniciarAnimacao();
        // Inicia a contagem para limpar a tela após 3 segundos
        finalizar();
    } catch (error) {

        const main = document.getElementById("entrada_1");
        const tela_laod = document.getElementById('entrada_2');

        let elemento_1;
        let elemento_2;

        if (main.innerHTML.trim() === "") {

            elemento_1 = 'Algo Inesperado Aconteceu !!'; // Caso o nome seja nulo ou indefinido

        }

        elemento_2 = '<canvas id="animationCanvas"></canvas>';
        tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1>' + elemento_2 + '</div>';

        // Inicia a animação após configurar o canvas
        iniciarAnimacao();

        // Inicia uma const para verificar dentro as informações localstorage, e validar se carregou existe e retornou True, para encerrar como o load
        finalizar();

        console.error('Erro ao verificar o ambiente:', error);
    } finally {
    }
}

function finalizar() {
    //Aplica intevalo de verificações para capitar se foi incluido carregou dentro de localstorage, uma vez encotrado um if busca a resposta para validar se ele é true, ele executa o if.
    const interval = setInterval(() => {
        const tela_laod = document.getElementById('entrada_2');
        const carregou = localStorage.getItem('Carregou');

        if (carregou === 'true') {
            tela_laod.innerHTML = ''; // Limpa o conteúdo do elemento do load
            localStorage.removeItem('Carregou'); // Remove o item do localStorage
            clearInterval(interval); // Para de verificar
        }
    }, 4500); // Verifica a cada 500ms
}

// Função responsavel por inicar animação de load da tela de carreagamento.
function iniciarAnimacao() {

    // Obtém o elemento do canvas no HTML
    const canvas = document.getElementById('animationCanvas');

    // Obtém o contexto 2D do canvas para desenhar
    const ctx = canvas.getContext('2d');

    // Define a largura e altura do canvas para ocupar toda a janela
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Define as propriedades do círculo que guiará a trajetória animada
    const circle = {
        centerX: canvas.width / 2, // Posição X do centro do círculo
        centerY: canvas.height / 2, // Posição Y do centro do círculo
        radius: 150, // Raio do círculo
        rotationSpeed: 0.10, // Velocidade de rotação (incremento do ângulo)
        angle: 0, // Ângulo inicial da animação
        linePath: [], // Armazena os pontos percorridos pelo movimento
        maxPathLength: 350 // Comprimento máximo da trilha deixada pelo movimento
    };

    // Função para desenhar a trilha do movimento circular
    function drawCircularPath() {
        // Limpa o canvas antes de redesenhar o caminho
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Calcula a posição do ponto atual baseado no ângulo
        const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
        const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);

        // Adiciona o novo ponto ao array da trilha
        circle.linePath.push({ x: pathX, y: pathY });

        // Inicia o desenho da linha
        ctx.beginPath();

        // Percorre os pontos armazenados para desenhar a trilha
        circle.linePath.forEach((point, i) => {
            if (i > 0) {
                // Conecta o ponto atual com o anterior para criar a linha
                ctx.moveTo(circle.linePath[i - 1].x, circle.linePath[i - 1].y);
                ctx.lineTo(point.x, point.y);
            }
        });

        // Define a cor e espessura da linha
        ctx.strokeStyle = '#22c0a3';
        ctx.lineWidth = 10;
        ctx.stroke();

        // Limita o tamanho da trilha para evitar que cresça indefinidamente
        if (circle.linePath.length > circle.maxPathLength) {
            // Remove o primeiro ponto da trilha para manter um tamanho constante
            circle.linePath.shift();

            // Reinicia o ângulo e a trilha quando um ciclo completo for concluído
            if (circle.angle >= Math.PI * 2) {
                circle.angle = 0;
                circle.linePath = [];
            }
        }
    }

    // Função de animação que atualiza o ângulo e redesenha a trilha
    function animate() {
        circle.angle += circle.rotationSpeed; // Incrementa o ângulo para continuar o movimento
        drawCircularPath(); // Redesenha a trilha baseada no novo ângulo
        requestAnimationFrame(animate); // Chama a animação no próximo frame
    }

    // Inicia a animação
    animate();

    // Adiciona um evento para reajustar o canvas ao redimensionar a janela
    window.addEventListener('resize', () => {
        // Atualiza a largura e altura do canvas
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Ajusta a posição do centro do círculo
        circle.centerX = canvas.width / 2;
        circle.centerY = canvas.height / 2;
    });

}

// Executa verificarAmbiente apenas uma vez após o carregamento total da página
window.addEventListener('DOMContentLoaded', verificarAmbiente);



function CarregamentoLoad() {

    const antigatelaconfi_new = document.getElementById('entrada_2')
    InciandoCarregamento_Config(antigatelaconfi_new)

    function InciandoCarregamento_Config(antigatelaconfi) {

        antigatelaconfi.innerHTML = estruraAnimiadaConfig();

        function estruraAnimiadaConfig() {
            return `
                    <div id="Painel_loading" class="Painel_loadingConfig">
                        <div class="loading">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    `;
        }

        FinalizandoCarregamento_Config();
    }

    function FinalizandoCarregamento_Config() {

        //Aplica intevalo de verificações para capitar se foi incluido carregou dentro de localstorage, uma vez encotrado um if busca a resposta para validar se ele é true, ele executa o if.
        const intervalConfig_new = setInterval(() => {
            const Subtela_laodConfig_new = document.getElementById('entrada_2');
            const SubPaine_loadConfig_new = document.getElementById('Painel_loading')
            const SubcarregouConfig_new = localStorage.getItem('Carregou_Novamente');

            if (SubcarregouConfig_new === 'true') {
                SubPaine_loadConfig_new.style.opacity = "0";

                setTimeout(() => {
                    Subtela_laodConfig_new.innerHTML = ''; // Limpa o conteúdo do elemento do load
                    localStorage.removeItem('Carregou_Novamente'); // Remove o item do localStorage
                    clearInterval(intervalConfig_new); // Para de verificar
                }, 500);

            }
        }, 1500); // Verifica a cada 500ms
    }



}