Commits: 1

Improve performance when scrolling

Through combination of animation frame and lazy rendering.

index 4739a1a..0cf07d4 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -19,6 +19,7 @@ import Element.Border as Border
=import Element.Events
=import Element.Font as Font
=import Element.Input as Input
+import Element.Lazy
=import Examples
=import Examples.CartesianCoordinates
=import Examples.Circle
@@ -81,11 +82,12 @@ type alias Model =
=
=type Msg
=    = NoOp
+    | Animate Float
=    | UrlRequested Browser.UrlRequest
=    | UrlChanged Url
=    | ContentFetched (Result Http.Error String)
=    | ExamplesMsg Examples.Msg
-    | Scroll Float
+    | ContainerMeasured (Result Dom.Error Dom.Viewport)
=    | ViewportMeasured { width : Int, height : Int }
=
=
@@ -325,19 +327,6 @@ view model =
=                    ++ ":"
=                    ++ String.fromInt col
=                )
-
-        scrollDecoder : Decoder Msg
-        scrollDecoder =
-            Json.Decode.field "target"
-                (Json.Decode.map3
-                    (\top height clientHeight ->
-                        top / (height - clientHeight)
-                    )
-                    (Json.Decode.field "scrollTop" Json.Decode.float)
-                    (Json.Decode.field "scrollHeight" Json.Decode.float)
-                    (Json.Decode.field "clientHeight" Json.Decode.float)
-                )
-                |> Json.Decode.map Scroll
=    in
=    { title = "Software Garden : " ++ content.title
=    , body =
@@ -348,9 +337,6 @@ view model =
=                , Element.htmlAttribute (Html.Attributes.lang "en")
=                , Font.family [ Font.typeface "Montserrat", Font.sansSerif ]
=                , Element.inFront navigationBar
-                , Element.height Element.fill
-                , Element.scrollbars
-                , Element.htmlAttribute (Html.Events.on "scroll" scrollDecoder)
=                ]
=        ]
=    }
@@ -416,8 +402,17 @@ update msg model =
=            , Cmd.map ExamplesMsg examplesCmd
=            )
=
-        Scroll position ->
-            ( { model | scroll = position }
+        ContainerMeasured (Ok { viewport, scene }) ->
+            let
+                scroll =
+                    viewport.y / (scene.height - viewport.height)
+            in
+            ( { model | scroll = scroll }
+            , Cmd.none
+            )
+
+        ContainerMeasured (Err error) ->
+            ( model
=            , Cmd.none
=            )
=
@@ -426,6 +421,12 @@ update msg model =
=            , Cmd.none
=            )
=
+        Animate delta ->
+            ( model
+            , Dom.getViewport
+                |> Task.attempt ContainerMeasured
+            )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -437,6 +438,7 @@ subscriptions model =
=            (\width height ->
=                ViewportMeasured { width = width, height = height }
=            )
+        , Browser.Events.onAnimationFrameDelta Animate
=        ]
=
=
@@ -648,10 +650,13 @@ document =
=            -> Model
=            -> View
=        page { title, children } model =
+            View title (Element.Lazy.lazy3 body children model.examples model.viewport)
+
+        body children model viewport =
=            children
-                |> List.map (\child -> child model.examples)
+                |> List.map (\child -> child model)
=                |> Element.textColumn
-                    (model.viewport
+                    (viewport
=                        |> Element.classifyDevice
=                        |> responsiveAttributes
=                        |> (++)
@@ -659,7 +664,6 @@ document =
=                            , Element.spacing 20
=                            ]
=                    )
-                |> View title
=
=        responsiveAttributes { class, orientation } =
=            case ( class, orientation ) of