Very pleased with this

All the basic bits work; startup spinner is very neat.

resources/public/css/spinner.css

@@ -0,0 +1,135 @@
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: white;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}

resources/public/css/yyy-static.css

@@ -316,6 +316,9 @@ th {
   color: white;
 }
 
+.splash-screen {
+}
+
 .warn {
   color: maroon;
 }

resources/templates/home.html

@@ -4,30 +4,33 @@
     <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="css/yyy-static.css" />
+    <link rel="stylesheet" type="text/css" href="css/spinner.css" />
     <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Archivo+Narrow" rel="stylesheet"/>
     <title>You Yes Yet?</title>
   </head>
   <body>
 
     <div id="app">
-      <div class="container-fluid">
+      <div class="splash-screen">
-        <div class="card-deck">
+        <div class="sk-fading-circle">
-          <div class="card-block">
+          <div class="sk-circle1 sk-circle"></div>
-            <h4>Welcome to YouYesYet</h4>
+          <div class="sk-circle2 sk-circle"></div>
-            <p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>
+          <div class="sk-circle3 sk-circle"></div>
-            <p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.</p>
+          <div class="sk-circle4 sk-circle"></div>
-            <h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
+          <div class="sk-circle5 sk-circle"></div>
-            <ul>
+          <div class="sk-circle6 sk-circle"></div>
-              <li>Open DevTools
+          <div class="sk-circle7 sk-circle"></div>
-              <li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > General > Console)
+          <div class="sk-circle8 sk-circle"></div>
-              <li>Check-in "Enable custom formatters"
+          <div class="sk-circle9 sk-circle"></div>
-              <li>Close DevTools
+          <div class="sk-circle10 sk-circle"></div>
-              <li>Open DevTools
+          <div class="sk-circle11 sk-circle"></div>
-            </ul>
+          <div class="sk-circle12 sk-circle"></div>
-            <p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for further details.</p>
-          </div>
         </div>
       </div>
+      <p class="footer">
+        You Yes Yet is loading.
+        You must enable JavaScript to use the You Yes Yet app.
+      </p>
     </div>
 
     <!-- scripts and styles -->

src/cljs/youyesyet/core.cljs

@@ -49,7 +49,6 @@
 (defn about-page []
   [:div.container {:id "main-container"}
    (back-link)
-   (big-link "Map" "#/map")
    [:div.row
     [:div.col-md-12
      "this is the story of youyesyet... work in progress"]]])
@@ -57,18 +56,16 @@
 
 (defn home-page []
   [:div.container {:id "main-container"}
-   (back-link)
-   (big-link "Map" "#/map")
    (big-link "About" "#/about")
    [:div.jumbotron
     [:h1 "Welcome to youyesyet"]
     [:p "Time to start building your site!"]
     [:p [:a.btn.btn-primary.btn-lg {:href "http://luminusweb.net"} "Learn more »"]]]])
-;;    (when-let [docs @(rf/subscribe [:docs])]
+   (when-let [docs @(rf/subscribe [:docs])]
-;;      [:div.row
+     [:div.row
-;;       [:div.col-md-12
+      [:div.col-md-12
-;;        [:div {:dangerouslySetInnerHTML
+       [:div {:dangerouslySetInnerHTML
-;;               {:__html (md->html docs)}}]]])])
+              {:__html (md->html docs)}}]]])
 
 (defn map-page []
   (maps/map-div))
@@ -113,7 +110,8 @@
 ;; -------------------------
 ;; Initialize app
 (defn fetch-docs! []
-  (GET (str js/context "/docs") {:handler #(rf/dispatch [:set-docs %])}))
+  (GET (str js/context "/docs")
+       {:handler #(rf/dispatch [:set-docs %])}))
 
 (defn mount-components []
   (r/render [#'page] (.getElementById js/document "app")))