{"v":{"area":"admin","slug":"preloader-layout","path":"/home/tiixcom/public_html/sistema/docs/readme/admin/preloader-layout.md","relative_path":"docs/readme/admin/preloader-layout.md","title":"Preloader do layout","html":"<h1>Preloader do layout</h1><h2>O que e</h2><p>Componente global exibido enquanto o shell Matdash e os assets iniciais ainda estao carregando.</p><h2>Onde aparece</h2><ul><li>admin Matdash, a partir de <code>includes/template/matdash/header.php</code>;</li><li>paginas publicas/frontend que usam <code>includes/template/frontend/layout-start.php</code>.</li></ul><h2>Como funciona</h2><ul><li>o markup usa <code>.preloader.tiix-preloader</code> para reaproveitar o ponto original do Matdash;</li><li>o estilo fica em <code>public/assets/app/css/shared/custom.css</code>, carregado depois do CSS principal do template;</li><li>o CSS compartilhado e carregado com <code>filemtime</code> na query string para evitar cache antigo apos deploy;</li><li>a marca exibida usa <code>assets/images/logotipo.png</code>, um recorte quadrado do simbolo TIIX para favicon/preloader;</li><li>a barra de progresso e indeterminada, sem JavaScript, para indicar atividade sem depender do tempo real de carregamento.</li><li>o proprio layout tem um fallback de auto-hide no <code>DOMContentLoaded</code>, no <code>load</code> e em timeout de seguranca, removendo o elemento do DOM apos ocultar.</li></ul><h2>Padrao visual</h2><ul><li>fundo claro menos agressivo que a tela branca pura;</li><li>bloco central pequeno, com icone quadrado e dimensoes fixas;</li><li>barra fina com cores TIIX para dar leitura de progresso;</li><li>posicionamento robusto com flexbox e <code>dvh</code>, evitando que o loader fique preso no canto superior esquerdo;</li><li>transicao curta de opacidade antes da remocao do DOM;</li><li>suporte a <code>prefers-reduced-motion</code> para usuarios com reducao de movimento ativada.</li></ul><h2>Manutencao</h2><ul><li>nao editar <code>assets/matdash/css/styles.css</code> para esse ajuste, porque ele e minificado e pertence ao pacote original;</li><li>manter overrides no CSS compartilhado do sistema;</li><li>ao trocar a identidade visual do preloader, manter <code>logotipo.png</code> como icone pequeno e deixar <code>logo.png</code> apenas para usos de marca completa.</li></ul>"},"exp":1780849838}