improvement: disable input when request is pending

lib/frontend/components/AppContainer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Input from './Input.svelte'
+  import InputContainer from './InputContainer.svelte'
   import EventList from './EventList.svelte'
   import Status from './Status.svelte'
   import TrackingPanel from './TrackingPanel.svelte'
@@ -14,8 +14,7 @@
   <TrackingPanel />
 {/if}
 
-<Status />
-<Input />
+<InputContainer />
 {#if showEventList}
   <EventList />
 {/if}

lib/frontend/components/Input.svelte

@@ -19,6 +19,9 @@
   import { createEvent } from '../actions'
   import logger from '../services/logger'
 
+  export let error
+  export let pending
+
   let value
 
   const onChange = (e) => {
@@ -38,6 +41,7 @@
     id="url"
     name="url"
     bind:value={value}
+    disabled={pending}
     placeholder="Paste / type FB event URL or event number..."
     title="Please insert Facebook Event URL / Number"
   />
@@ -45,6 +49,7 @@
     id="submit"
     type='submit'
     value='Submit'
+    disabled={pending}
     on:click={handleSubmit}
   />
 </form>

lib/frontend/components/InputContainer.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { parseStatusStore, requestStore, swStatusStore } from '../stores'
+  import Input from './Input.svelte'
+  import Status from './Status.svelte'
+
+  $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
+  $: pending = Boolean($requestStore && !$requestStore.error)
+  $: pendingRequest = $requestStore
+  $: status = $parseStatusStore
+  $: swStatus = $swStatusStore
+</script>
+
+<div class="input-container">
+  <Input
+    {pending}
+    {error}
+  />
+  <Status
+    {error}
+    {pending}
+    {pendingRequest}
+    {status}
+    {swStatus}
+  />
+</div>

lib/frontend/components/Status.svelte

@@ -14,31 +14,32 @@
 </style>
 
 <script>
-  import { parseStatusStore, requestStore, swStatusStore } from '../stores'
-
-  $: error = ($requestStore && $requestStore.error) ? $requestStore.error : null
-  $: pendingRequest = Boolean($requestStore && !$requestStore.error)
+  export let error
+  export let pending
+  export let pendingRequest
+  export let status
+  export let swStatus
 </script>
 
 <div id='status'>
   {#if error}
-    <div class='status-item'>
+    <div class='status-item status-item--error'>
       {error.toString()}
     </div>
   {/if}
-  {#if pendingRequest}
+  {#if pending && pendingRequest}
     <div class='status-item'>
-      Fetching event {$requestStore.url}
+      Fetching event {pendingRequest.url}
     </div>
   {/if}
-  {#if $parseStatusStore}
+  {#if status}
     <div class='status-item'>
-      {$parseStatusStore}
+      {status}
     </div>
   {/if}
-  {#if $swStatusStore}
+  {#if swStatus}
     <div class='status-item'>
-      {$swStatusStore}
+      {swStatus}
     </div>
   {/if}
 </div>