Check if backend server is ready before displaying content

Updated Sapper to 0.28.9

---

sveltejs/sapper#948
sveltejs/sapper#1498

package.json

@@ -34,7 +34,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "sapper": "^0.28.0",
+    "sapper": "^0.28.9",
     "svelte": "^3.17.3",
     "svelte-preprocess": "^4.1.1"
   },

src/routes/_layout.svelte

@@ -1,14 +1,34 @@
+<script context="module">
+  export function preload() {
+    return { ready: global.BACKEND_READY };
+  }
+</script>
+
 <script>
-  // import Nav from "../ui/components/Nav.svelte";
+  import { stores } from "@sapper/app";
+  const { page } = stores();
+  const { error } = $page;
+
   export let segment;
+  export let ready;
+
+  import ErrorLayout from "./_error.svelte";
+
+  // import Nav from "../ui/components/Nav.svelte";
 </script>
 
 <style lang="scss" global>
   @import "../ui/style/index.scss";
 </style>
 
-{#if [undefined, 'invite', 'debug'].includes(segment) }
-  <slot />
+{#if error || !ready || [undefined, 'invite', 'debug'].includes(segment)}
+  {#if !ready}
+    <ErrorLayout
+      status="Not ready"
+      error={{ message: 'Server still loading' }} />
+  {:else}
+    <slot />
+  {/if}
 {:else}
   <!-- <Nav {segment} /> -->
   <slot />