summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorYorhel <git@yorhel.nl>2019-11-10 16:06:37 +0100
committerYorhel <git@yorhel.nl>2019-11-10 16:10:07 +0100
commit671ba75f3fdc46d250fd7e2a64017dc2b62d885e (patch)
tree9a691c810c941b2e6b657100b5faf8fde4eca1d2
parent6978b670e715d32f39e15c1aa2191d5dcd86685c (diff)
ulist: Improve page load time by lazily loading some things
Instantiating 100 <input type="date"> takes about 180ms on my system with Firefox, so doing that lazily is a big win. UList.Opt is typically hidden, lazily initializing that saves an additional 60ms. Also increase the mouse-over div for the date editor a bit so that there's more hover space.
-rw-r--r--data/style.css2
-rw-r--r--elm/UList/DateEdit.elm28
-rw-r--r--elm/UList/Opt.js13
-rw-r--r--elm/elm-init.js3
4 files changed, 32 insertions, 14 deletions
diff --git a/data/style.css b/data/style.css
index fdc47f5a..a0d744e2 100644
--- a/data/style.css
+++ b/data/style.css
@@ -816,7 +816,7 @@ div.votelist td.tc2 { width: 50px; text-align: right; padding-right: 10px }
.ulist .tc4 input { width: 55px; text-align: right }
.ulist .tc5, .ulist .tc6, .ulist .tc7 { white-space: nowrap; width: 100px }
-.ulist .tc6 div, .ulist .tc7 div { height: 1em }
+.ulist .tc6 div, .ulist .tc7 div { height: 1em; padding-bottom: 4px }
.ulist .tc6 div span, .ulist .tc7 div span { position: absolute; z-index: 0 }
.ulist .tc6 div input, .ulist .tc7 div input { position: absolute; z-index: 900; width: 110px; visibility: hidden }
.ulist .tc6 div:hover input, .ulist .tc7 div:hover input,
diff --git a/elm/UList/DateEdit.elm b/elm/UList/DateEdit.elm
index fc5da234..0c16a8c4 100644
--- a/elm/UList/DateEdit.elm
+++ b/elm/UList/DateEdit.elm
@@ -20,22 +20,25 @@ main = Browser.element
}
type alias Model =
- { state : Api.State
- , flags : GDE.Send
- , val : String
- , debnum : Int -- Debounce for submit
+ { state : Api.State
+ , flags : GDE.Send
+ , val : String
+ , debnum : Int -- Debounce for submit
+ , visible : Bool
}
init : GDE.Send -> Model
init f =
- { state = Api.Normal
- , flags = f
- , val = f.date
- , debnum = 0
+ { state = Api.Normal
+ , flags = f
+ , val = f.date
+ , debnum = 0
+ , visible = False
}
type Msg
- = Val String
+ = Show
+ | Val String
| Save Int
| Saved GApi.Response
@@ -43,6 +46,7 @@ type Msg
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
+ Show -> ({ model | visible = True }, Cmd.none)
Val s -> ({ model | val = s, debnum = model.debnum + 1 }, Task.perform (\_ -> Save (model.debnum+1)) <| Process.sleep 500)
Save n ->
@@ -59,11 +63,13 @@ update msg model =
view : Model -> Html Msg
-view model = div [ class "compact" ] <|
+view model = div (class "compact" :: if model.visible then [] else [onMouseOver Show]) <|
case model.state of
Api.Loading -> [ span [ class "spinner" ] [] ]
Api.Error _ -> [ b [ class "standout" ] [ text "error" ] ] -- Argh
Api.Normal ->
- [ input ([ type_ "date", class "text", value model.val, onInput Val, onBlur (Save model.debnum), pattern "yyyy-mm-dd" ] ++ GDE.valDate) []
+ [ if model.visible
+ then input ([ type_ "date", class "text", value model.val, onInput Val, onBlur (Save model.debnum), pattern "yyyy-mm-dd" ] ++ GDE.valDate) []
+ else text ""
, span [] [ text model.val ]
]
diff --git a/elm/UList/Opt.js b/elm/UList/Opt.js
index 11ac9419..2c0f274a 100644
--- a/elm/UList/Opt.js
+++ b/elm/UList/Opt.js
@@ -1,6 +1,6 @@
var init = Elm.UList.Opt.init;
-Elm.UList.Opt.init = function(opt) {
- // TODO: This module is more often than not hidden from the page, lazily loading it could improve page load time.
+
+var actualInit = function(opt) {
var app = init(opt);
app.ports.ulistVNDeleted.subscribe(function(b) {
@@ -26,3 +26,12 @@ Elm.UList.Opt.init = function(opt) {
e.innerText = rels[0] + '/' + rels[1];
});
};
+
+// This module is typically hidden, lazily load it only when the module is visible to speed up page load time.
+Elm.UList.Opt.init = function(opt) {
+ var e = document.getElementById('collapse_vid'+opt.flags.vid);
+ if(e.checked)
+ actualInit(opt);
+ else
+ e.addEventListener('click', function() { actualInit(opt) }, { once: true });
+};
diff --git a/elm/elm-init.js b/elm/elm-init.js
index 1388b0cd..e48a94f3 100644
--- a/elm/elm-init.js
+++ b/elm/elm-init.js
@@ -19,8 +19,10 @@
/* Load all Elm modules listed in the pageVars.elm array */
if(pageVars.elm) {
+ //var t0 = performance.now();
for(var i=0; i<pageVars.elm.length; i++) {
var e = pageVars.elm[i];
+ //if(e[0] != 'UList.DateEdit') continue;
var mod = e[0].split('.').reduce(function(p, c) { return p[c] }, Elm);
var node = document.getElementById('elm'+i);
if(e.length > 1)
@@ -28,4 +30,5 @@ if(pageVars.elm) {
else
mod.init({ node: node });
}
+ //console.log("Elm modules initialized in " + (performance.now() - t0) + " milliseconds.");
}