From 04e04bfb15597a05fdfd814df4efd1b599fe6073 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 8 May 2022 13:54:02 +0200
Subject: [PATCH] =?utf8?q?Lazy=20loading=20the=20user=E2=80=99s=20avatar?=
 =?utf8?q?=20causes=20flashes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Safari (macOS and iOS) does not handle lazy loaded images above the fold gracefully. This causes the user’s avatar to flicker noticeably on ever page navigation.
---
 com.woltlab.wcf/templates/pageHeaderUser.tpl           |  4 ++--
 .../lib/data/user/avatar/AvatarDecorator.class.php     |  4 ++--
 .../files/lib/data/user/avatar/UserAvatar.class.php    | 10 ++++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 1c02dc3d27..d7650b054e 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -1,6 +1,6 @@
 <nav id="topMenu" class="userPanel{if $__wcf->user->userID} userPanelLoggedIn{/if}">
 	{if $__wcf->user->userID}
-		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)}</span>
+		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)}</span>
 	{else}
 		<a href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}" class="userPanelLoginLink jsTooltip" title="{lang}wcf.user.loginOrRegister{/lang}">
 			<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
@@ -20,7 +20,7 @@
 					aria-haspopup="true"
 					aria-expanded="false"
 				>
-					{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32)} <span>{lang}wcf.user.userNote{/lang}</span>
+					{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)} <span>{lang}wcf.user.userNote{/lang}</span>
 				</a>
 				<div class="userMenu userMenuControlPanel" data-origin="userMenu" tabindex="-1" hidden>
 					<div class="userMenuHeader">
diff --git a/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php b/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php
index 21649bc0e0..e1ed7be854 100644
--- a/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php
+++ b/wcfsetup/install/files/lib/data/user/avatar/AvatarDecorator.class.php
@@ -57,9 +57,9 @@ final class AvatarDecorator implements IUserAvatar, ISafeFormatAvatar
     /**
      * @inheritDoc
      */
-    public function getImageTag($size = null)
+    public function getImageTag($size = null, bool $lazyLoading = true)
     {
-        return $this->avatar->getImageTag($size);
+        return $this->avatar->getImageTag($size, $lazyLoading);
     }
 
     /**
diff --git a/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php b/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php
index 616c56e1b2..33f36a292d 100644
--- a/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php
+++ b/wcfsetup/install/files/lib/data/user/avatar/UserAvatar.class.php
@@ -113,9 +113,15 @@ class UserAvatar extends DatabaseObject implements IUserAvatar, ISafeFormatAvata
     /**
      * @inheritDoc
      */
-    public function getImageTag($size = null)
+    public function getImageTag($size = null, bool $lazyLoading = true)
     {
-        return '<img src="' . StringUtil::encodeHTML($this->getURL($size)) . '" width="' . $size . '" height="' . $size . '" alt="" class="userAvatarImage" loading="lazy">';
+        return \sprintf(
+            '<img src="%s" width="%d" height="%d" alt="" class="userAvatarImage" loading="%s">',
+            StringUtil::encodeHTML($this->getURL($size)),
+            $size,
+            $size,
+            $lazyLoading ? 'lazy' : 'eager'
+        );
     }
 
     /**
-- 
2.20.1