add load bar home and emergency kit

src/components/App.tsx

@@ -15,6 +15,7 @@ import plusLogo from "~/assets/mutiny-plus-logo.png";
 import { PendingNwc } from "./PendingNwc";
 import { useI18n } from "~/i18n/context";
 import { DecryptDialog } from "./DecryptDialog";
+import { LoadingIndicator } from "./LoadingIndicator";
 
 export default function App() {
     const [state, _actions] = useMegaStore();
@@ -23,6 +24,7 @@ export default function App() {
     return (
         <SafeArea>
             <DefaultMain>
+                <LoadingIndicator />
                 <header class="w-full flex justify-between items-center mt-4 mb-2">
                     <div class="flex items-center gap-2">
                         <Switch>

src/components/LoadingIndicator.tsx

@@ -0,0 +1,67 @@
+import { Progress } from "@kobalte/core";
+import { Show } from "solid-js";
+import { useMegaStore } from "~/state/megaStore";
+
+export function LoadingBar(props: { value: number; max: number }) {
+    function valueToStage(value: number) {
+        switch (value) {
+            case 0:
+                return "Just getting started";
+            case 1:
+                return "Checking user status";
+            case 2:
+                return "Double checking something";
+            case 3:
+                return "Downloading";
+            case 4:
+                return "Setup";
+            case 5:
+                return "Done";
+            default:
+                return "Just getting started";
+        }
+    }
+    return (
+        <Progress.Root
+            value={props.value}
+            minValue={0}
+            maxValue={props.max}
+            getValueLabel={({ value }) => `Loading: ${valueToStage(value)}`}
+            class="w-full flex flex-col gap-2"
+        >
+            <Progress.ValueLabel class="text-sm text-m-grey-400" />
+            <Progress.Track class="h-6  bg-white/10 rounded">
+                <Progress.Fill class="bg-m-blue rounded h-full w-[var(--kb-progress-fill-width)] transition-[width]" />
+            </Progress.Track>
+        </Progress.Root>
+    );
+}
+
+export function LoadingIndicator() {
+    const [state, _actions] = useMegaStore();
+
+    const loadStageValue = () => {
+        switch (state.load_stage) {
+            case "fresh":
+                return 0;
+            case "checking_user":
+                return 1;
+            case "checking_double_init":
+                return 2;
+            case "downloading":
+                return 3;
+            case "setup":
+                return 4;
+            case "done":
+                return 5;
+            default:
+                return 0;
+        }
+    };
+
+    return (
+        <Show when={state.load_stage !== "done"}>
+            <LoadingBar value={loadStageValue()} max={5} />
+        </Show>
+    );
+}