3 ms·
> Dummy Content and Placeholders We've started doing something similar with our front-end apps, but it's not placeholders. Our router is set up to store page m
by mikegioia 11y ago
> Dummy Content and Placeholders
We've started doing something similar with our front-end apps, but it's not placeholders. Our router is set up to store page markup (indexed by DOM node ID) at the end of every page request. So for the dashboard, we'd save something to localstorage with the key "APPNAME.domstate.dashboard":
{ '#nav': $nav.html(),
'#header': $header.html(),
'#main': $main.html()
...
}
We compile HTML templates for every root page (in this case dashboard). On every new page load, the template is set up to look for the domstate in localstorage before it downloads any JS and bootstraps the application.
Since the HTML files are aggressively cached by the browser, and since the localstorage injection happens first, we can re-render the last version of that page for the user before the new data is re-populated. It works pretty well, but the drawback is you may see content flicker when it updates.