feature: track chunk loading in UI

lib/frontend/components/Input.svelte

@@ -26,6 +26,9 @@
   export let error
   export let pending
   export let pendingRequest
+  export let onModuleLoadStart
+  export let onModuleLoadStop
+  export let onModuleLoadError
 
   let value = ''
   $: value = error && pendingRequest && pendingRequest.url || ''
@@ -45,10 +48,14 @@
     e.preventDefault()
 
    try {
+     onModuleLoadStart()
      const module = await import('../actions')
+     onModuleLoadStop()
+
      module.createEvent(value, { logger })
      value = ''
    } catch (importError) {
+     onModuleLoadError(importError)
      console.error(importError)
    }
   }

lib/frontend/components/InputContainer.svelte

@@ -8,6 +8,10 @@
   $: pendingRequest = $requestStore
   $: status = $parseStatusStore
   $: swStatus = $swStatusStore
+
+  const handleModuleLoadStart = () => parseStatusStore.set('Loading application data.')
+  const handleModuleLoadEnd = () => parseStatusStore.set(null)
+  const handleModuleLoadError = (error) => parseStatusStore.set('Failed to load application data.')
 </script>
 
 <div class="input-container">
@@ -15,6 +19,9 @@
     {pending}
     {pendingRequest}
     {error}
+    onModuleLoadStart={handleModuleLoadStart}
+    onModuleLoadStop={handleModuleLoadEnd}
+    onModuleLoadError={handleModuleLoadError}
   />
   <Status
     {error}