From b6613ae4c92eb8ea02bf0375d419d6a510ddee99 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 16:05:52 +0300
Subject: [PATCH] perf(images): add loading=lazy to in-list previews and
 attachments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four image sites that render thumbnails/previews inside lists or tab
panels now hint loading=lazy so the browser defers the network fetch
until the element is near the viewport:
- Support.tsx attachment preview grid
- AdminTickets.tsx reply attachment grid
- BroadcastPreview.tsx photo preview
- BrandingTab.tsx logo preview in admin settings

Top-of-page logos (AppHeader/AppShell/DesktopSidebar/Login/Telegram
redirect/DeepLink) intentionally stay eager — they're above the fold
and should paint on first frame. Payment-method icons (6x6 px) are
already negligible. Compose attachment previews use blob: URLs where
loading=lazy is a no-op.
---
 src/components/admin/BrandingTab.tsx           | 1 +
 src/components/broadcasts/BroadcastPreview.tsx | 7 ++++++-
 src/pages/AdminTickets.tsx                     | 1 +
 src/pages/Support.tsx                          | 1 +
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/admin/BrandingTab.tsx b/src/components/admin/BrandingTab.tsx
index 4bab96c..951f557 100644
--- a/src/components/admin/BrandingTab.tsx
+++ b/src/components/admin/BrandingTab.tsx
@@ -116,6 +116,7 @@ export function BrandingTab({ accentColor = '#3b82f6' }: BrandingTabProps) {
                 <img
                   src={brandingApi.getLogoUrl(branding) ?? undefined}
                   alt="Logo"
+                  loading="lazy"
                   className="h-full w-full object-cover"
                 />
               ) : (
diff --git a/src/components/broadcasts/BroadcastPreview.tsx b/src/components/broadcasts/BroadcastPreview.tsx
index 169dc16..0971bba 100644
--- a/src/components/broadcasts/BroadcastPreview.tsx
+++ b/src/components/broadcasts/BroadcastPreview.tsx
@@ -217,7 +217,12 @@ export function TelegramPreview({
         <div className="rounded-xl bg-[#0e1621] p-3">
           <div className="ml-auto max-w-[90%] rounded-2xl rounded-tr-md bg-[#2b5278] p-3 text-white shadow">
             {mediaUrl && mediaType === 'photo' && (
-              <img src={mediaUrl} alt="" className="mb-2 max-h-72 w-full rounded-lg object-cover" />
+              <img
+                src={mediaUrl}
+                alt=""
+                loading="lazy"
+                className="mb-2 max-h-72 w-full rounded-lg object-cover"
+              />
             )}
             {mediaUrl && mediaType === 'video' && (
               <video src={mediaUrl} controls className="mb-2 max-h-72 w-full rounded-lg" />
diff --git a/src/pages/AdminTickets.tsx b/src/pages/AdminTickets.tsx
index 7f67df8..d6ae44c 100644
--- a/src/pages/AdminTickets.tsx
+++ b/src/pages/AdminTickets.tsx
@@ -582,6 +582,7 @@ export default function AdminTickets() {
                             <img
                               src={att.preview}
                               alt="Preview"
+                              loading="lazy"
                               className="h-16 w-16 rounded-lg object-cover"
                             />
                           ) : (
diff --git a/src/pages/Support.tsx b/src/pages/Support.tsx
index a6b7fcb..11146d4 100644
--- a/src/pages/Support.tsx
+++ b/src/pages/Support.tsx
@@ -337,6 +337,7 @@ export default function Support() {
               <img
                 src={att.preview}
                 alt="Preview"
+                loading="lazy"
                 className="h-16 w-16 rounded-lg border border-dark-700 object-cover"
               />
             ) : (