Make posts keyed nodes for perf

2 files changed, 21 insertions, 2 deletions

diff --git a/db.json b/db.json
index 0f6afd0..a547969 100644
--- a/db.json
+++ b/db.json
@@ -54,6 +54,17 @@
         "name": "Jan Tuomi"
       },
       "id": "JvXaf8k"
+    },
+    {
+      "content": "benis",
+      "createdAt": 1635612178,
+      "likes": 0,
+      "userPictureUrl": "https://lh3.googleusercontent.com/a-/AOh14Ggi0fsy3DrKGf2CswW96pft9BO3tDskxr0241FmxQ=s96-c",
+      "author": {
+        "id": "jans.tuomi@gmail.com",
+        "name": "Jan Tuomi"
+      },
+      "id": "_nt608q"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/Pages/Feed.elm b/src/Pages/Feed.elm
index 7fbe98a..73875a3 100644
--- a/src/Pages/Feed.elm
+++ b/src/Pages/Feed.elm
@@ -5,6 +5,8 @@ import DateFormat.Relative exposing (relativeTime)
 import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css, placeholder, src, type_, value)
 import Html.Styled.Events exposing (onClick, onInput, onSubmit)
+import Html.Styled.Keyed as Keyed
+import Html.Styled.Lazy exposing (lazy)
 import RemoteData exposing (RemoteData(..))
 import Time exposing (now)
 import Types exposing (Model, Msg(..), Post)
@@ -57,7 +59,8 @@ styles =
 
 postDiv : Time.Posix -> Post -> Html Msg
 postDiv now post =
-    div [ styles.post ]
+    div
+        [ styles.post ]
         [ span []
             [ img [ styles.postProfilePicture, src post.userPictureUrl ] [] ]
         , span [ styles.postHeader ]
@@ -74,6 +77,11 @@ postDiv now post =
         ]
 
 
+keyedPostDiv : Time.Posix -> Post -> ( String, Html Msg )
+keyedPostDiv now post =
+    ( post.id, lazy (postDiv now) post )
+
+
 postsDiv : Model -> Html Msg
 postsDiv model =
     case model.posts of
@@ -87,7 +95,7 @@ postsDiv model =
             div [] []
 
         Success posts ->
-            div [ styles.postList ] <| List.map (postDiv model.now) posts
+            Keyed.node "div" [ styles.postList ] <| List.map (keyedPostDiv model.now) posts
 
 
 composeDiv : Model -> Html Msg