mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
perf(images): add loading=lazy to in-list previews and attachments
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.
This commit is contained in:
@@ -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"
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
) : (
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user