Test for lazy images

typestruck · Jun 27, 2024 · 29cb780 · 29cb780
1 parent c744a2f
commit 29cb780
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/src/Shared/Avatar.js b/src/Shared/Avatar.js
@@ -0,0 +1,8 @@
+export function createImg() {
+    let i = new Image();
+
+    i.setAttribute('async', '');
+    i.setAttribute('loading', 'defer');
+
+    return i;
+}
diff --git a/src/Shared/Avatar.purs b/src/Shared/Avatar.purs
@@ -4,11 +4,17 @@ import Prelude
 
 import Data.Maybe (Maybe)
 import Data.Maybe as DM
+import Effect (Effect)
 import Flame.Html.Attribute as HA
-import Flame.Types (NodeData)
-import Shared.Resource (Bundle(..), Media(..), ResourceType(..))
+import Flame.Html.Element (class ToNode)
+import Flame.Html.Element as HE
+import Flame.Types (Html, NodeData)
+import Shared.Resource (Media(..), ResourceType(..))
 import Shared.Resource as SP
 import Shared.Unsafe as SU
+import Web.DOM (Node)
+
+foreign import createImg :: Effect Node
 
 defaultAvatar ∷ String
 defaultAvatar = avatarPath 1
@@ -45,11 +51,16 @@ avatarColorClass index = className <> show (mod (SU.fromJust index) totalColorCl
       totalColorClasses = 4
 
 parseAvatar ∷ Maybe String → Maybe String
-parseAvatar avatar = (\a → SP.mediaPath (Upload a) Included) <$> avatar
+parseAvatar av = (\a → SP.mediaPath (Upload a) Included) <$> av
 
 async ∷ ∀ message. NodeData message
 async = HA.createAttribute "async" ""
 
 decoding ∷ ∀ (message ∷ Type). String → NodeData message
 decoding value = HA.createAttribute "decoding" value
 
+-- avoid lagging pictures when browsing suggestions
+avatar :: forall nd34 message35. ToNode nd34 message35 NodeData => nd34 -> Html message35
+avatar attributes = HE.managed { createNode, updateNode } attributes unit
+      where  createNode _ = createImg
+             updateNode _ _ _ = createImg
diff --git a/src/Shared/Im/View/SuggestionCall.purs b/src/Shared/Im/View/SuggestionCall.purs
@@ -30,16 +30,16 @@ suggestionCall { contacts, suggesting, chatting, suggestions, toggleModal }
                                           [ let
                                                   previousIndex = map (_ - 1) suggesting
                                             in
-                                                  HE.img [ SA.async, SA.decoding "lazy", HA.class' $ "avatar-contact-list" <> SA.avatarColorClass previousIndex, HA.src $ SA.avatarForRecipient previousIndex $ getAvatar previousIndex ]
+                                                  SA.avatar [ HA.class' $ "avatar-contact-list" <> SA.avatarColorClass previousIndex, HA.src $ SA.avatarForRecipient previousIndex $ getAvatar previousIndex ]
                                           ]
                                   , HE.div [ HA.class' "avatar-contact-list-div margin-less-z", HA.onClick FocusCurrentSuggestion, HA.title "Move to this chat suggestion" ]
-                                          [ HE.img [ SA.async, SA.decoding "lazy", HA.class' $ avatarClasses avatar, HA.src $ SA.avatarForRecipient suggesting avatar ]
+                                          [ SA.avatar [ HA.class' $ avatarClasses avatar, HA.src $ SA.avatarForRecipient suggesting avatar ]
                                           ]
                                   , HE.div [ HA.class' "avatar-contact-list-div margin-less faded", HA.onClick $ SpecialRequest NextSuggestion, HA.title "Move to this chat suggestion" ]
                                           [ let
                                                   nextIndex = map (_ + 1) suggesting
                                             in
-                                                  HE.img [ SA.async, SA.decoding "lazy", HA.class' $ "avatar-contact-list" <> SA.avatarColorClass nextIndex, HA.src $ SA.avatarForRecipient nextIndex $ getAvatar nextIndex ]
+                                                  SA.avatar [ HA.class' $ "avatar-contact-list" <> SA.avatarColorClass nextIndex, HA.src $ SA.avatarForRecipient nextIndex $ getAvatar nextIndex ]
                                           ]
                                   , HE.div [ HA.class' "contact-profile", HA.title "Your chat suggestions" ]
                                           [ HE.span (HA.class' "contact-name") name

diff --git a/src/Shared/Im/View/SuggestionProfile.purs b/src/Shared/Im/View/SuggestionProfile.purs
@@ -178,7 +178,7 @@ fullProfile presentation index model@{ toggleContextMenu, freeToFetchSuggestions
 
 displayProfile ∷ ∀ message. Maybe Int → ImUser → ImUser → Maybe message → Array (Html message)
 displayProfile index loggedUser { karmaPosition, name, availability, temporary, avatar, age, karma, headline, gender, onlineStatus, country, languages, tags, description } temporaryUserMessage =
-      [ HE.img [ SA.async, SA.decoding "lazy", HA.class' avatarClasses, HA.src $ SA.avatarForRecipient index avatar ]
+      [ SA.avatar [ HA.class' avatarClasses, HA.src $ SA.avatarForRecipient index avatar ]
       , HE.h1 (HA.class' "profile-name") name
       , HE.div (HA.class' "headline") headline
       , HE.div [ HA.class' { "online-status": true, hidden: not loggedUser.onlineStatus || not onlineStatus, duller: availability /= Online } ] $ show availability