Add branded boot splash (Ladill Mail style) on app pages

InjectBootSplash middleware shows a self-branded loading splash once per session while the app boots, then fades out. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-25 22:11:00 +00:00
parent ee2af28739
commit 73b9c30562
3 changed files with 90 additions and 0 deletions
@@ -0,0 +1,43 @@
+@php
+    // Branded boot splash (Ladill Mail style). Self-icon from this app's subdomain.
+    $sub = strtolower((string) ((explode('.', (string) (parse_url((string) config('app.url'), PHP_URL_HOST) ?: '')))[0] ?? ''));
+    $icon = $sub !== '' && is_file(public_path("images/launcher-icons/{$sub}.svg")) ? "images/launcher-icons/{$sub}.svg" : null;
+    $label = (string) config('app.name', 'Ladill');
+@endphp
+<div id="ladill-boot" role="status" aria-live="polite">
+    <div class="lb-wrap">
+        @if ($icon)
+            <img class="lb-logo" src="{{ asset($icon) }}?v={{ @filemtime(public_path($icon)) ?: '1' }}" alt="">
+        @endif
+        <div class="lb-bar"><span></span></div>
+        <div class="lb-title">Loading {{ $label }}…</div>
+    </div>
+</div>
+<style>
+    #ladill-boot{position:fixed;inset:0;z-index:99999;background:#f8fafc;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease;font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
+    #ladill-boot .lb-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;width:260px}
+    #ladill-boot .lb-logo{width:64px;height:64px;animation:lb-pulse 1.6s ease-in-out infinite}
+    #ladill-boot .lb-bar{width:100%;height:4px;background:#e2e8f0;border-radius:999px;overflow:hidden}
+    #ladill-boot .lb-bar>span{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,#4f46e5,#7c3aed);animation:lb-fill 1.9s cubic-bezier(.4,0,.2,1) forwards}
+    #ladill-boot .lb-title{font-size:14px;color:#64748b;font-weight:500}
+    @keyframes lb-fill{0%{width:8%}55%{width:68%}100%{width:93%}}
+    @keyframes lb-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.93);opacity:.82}}
+</style>
+<script>
+(function(){
+    var el=document.getElementById('ladill-boot');
+    if(!el)return;
+    // Show once per browser session; suppress instantly on later navigations (no flash).
+    try{
+        if(sessionStorage.getItem('lb_booted')){el.parentNode.removeChild(el);return;}
+        sessionStorage.setItem('lb_booted','1');
+    }catch(e){}
+    var start=Date.now(),MIN=550;
+    function done(){
+        var wait=Math.max(0,MIN-(Date.now()-start));
+        setTimeout(function(){if(!el)return;el.style.opacity='0';setTimeout(function(){if(el&&el.parentNode)el.parentNode.removeChild(el);},400);},wait);
+    }
+    if(document.readyState==='complete')done();else window.addEventListener('load',done);
+    setTimeout(done,8000); // safety net
+})();
+</script>