Fix flash of unstyled content in dev mode

In dev mode, we were pulling in styles as part of app.js which comes after all the content. If we move these to a separate bundle that's loaded in <head> it's more representative of how CSS is loaded in prod, and we don't get a flash of unstyled content in dev.
justicedemocrats · Jul 7, 2018 · fa2677c · fa2677c
1 parent ef246a4
commit fa2677c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
@@ -23,10 +23,8 @@ module.exports = (env) => {
     context: __dirname,
 
     entry: {
-      app: [
-        "js/app.js",
-        "stylus/app.styl"
-      ]
+      styles: ["stylus/app.styl"],
+      app: ["js/app.js"],
     },
 
     output: {

diff --git a/config/prod.exs b/config/prod.exs
@@ -28,7 +28,7 @@ config :logger, level: :info
 
 config :candidate_website,
   script_src: ~s(<script src="/js/app.js"></script>),
-  css_src: ~s(<link rel="stylesheet" href="/css/app.css" media="screen,projection" />)
+  css_src: ~s(<link rel="stylesheet" href="/css/styles.css" media="screen,projection" />)
 
 config :actionkit,
   base: "${AK_BASE}",

diff --git a/lib/candidate_website/views/layout_view.ex b/lib/candidate_website/views/layout_view.ex
@@ -9,7 +9,11 @@ defmodule CandidateWebsite.LayoutView do
                 ~s(<script src="http://localhost:8080/js/app.js"></script>)
               )
 
-  @css_src Application.get_env(:candidate_website, :css_src, "")
+  @css_src Application.get_env(
+             :candidate_website,
+             :css_src,
+             ~s(<script src="http://localhost:8080/js/styles.js"></script>)
+           )
 
   def js_script_tag, do: @script_src