Add loading indicator for image preview in builder

[bonheur15]

Problem

The image URL builder on the landing page fetches and displays an optimized image preview, but provides no loading indicator while the request is in progress.

Location: internal/web/views/landing.templ:113,136-137

When a user enters a URL and clicks build, the <img> element is shown immediately with prev.style.display = "block" and prev.src = full, but the image takes several seconds to load (the origin must be fetched, transformed, and cached). During this time the user sees nothing or a broken image icon.

Current JavaScript

prev.src = full;
prev.style.display = "block";

Proposed Fix

1. Add a CSS spinner/placeholder that shows while the image is loading
2. Use the <img> elements onload and onerror events to toggle the loading state
3. Optionally add a subtle fade-in transition when the image appears

Example

<div class="preview-wrap" id="b-preview-wrap">
    <div class="spinner" id="b-spinner" style="display:none"></div>
    <img class="preview" id="b-prev" alt="optimized preview" loading="lazy" style="display:none"/>
</div>

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

prev.onload = () => { spinner.style.display = "none"; prev.style.opacity = "1"; };
prev.onerror = () => { spinner.style.display = "none"; prev.style.display = "none"; };
prev.style.opacity = "0";
prev.src = full;
prev.style.display = "block";
spinner.style.display = "block";

[christian-rw]

are u willing to accept contributions?

[bonheur15]

yes contribution are allowed @christiannshimyumukiza-cloud