feat(ui): fetching indicator

src/App.svelte

@@ -10,6 +10,8 @@
 	import { onMount } from 'svelte';
 	import { SkizzleUpdaterEnum } from 'models/skizzle';
 	import { clientAuthenticated } from 'shared/stores/authentication.store';
+	import Loader from 'components/Loader';
+
 	const app = require('electron').ipcRenderer;
 
 	let update: SkizzleUpdaterEnum;
@@ -20,7 +22,11 @@
 		[Views.Settings]: Settings,
 	};
 
-	let currentView: Views = $clientAuthenticated.isGithubAuthenticated || $clientAuthenticated.isAzureDevOpsAuthenticated ? Views.Main : Views.Accounts;
+	let currentView: Views =
+		$clientAuthenticated.isGithubAuthenticated ||
+		$clientAuthenticated.isAzureDevOpsAuthenticated
+			? Views.Main
+			: Views.Accounts;
 	const onViewChange = (view: Views) => (currentView = view);
 
 	window.addEventListener('online', () => offline.set(false));
@@ -54,6 +60,7 @@
 	{/if}
 {/if}
 <main style="--color:{$settings.theme}; --color-focus:{$settings.theme}80">
+	<Loader />
 	<Navigation {currentView} {onViewChange} />
 	<div>
 		<svelte:component this={views[currentView]} />

src/components/Loader/Loader.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { isFetchingData, isLoading } from 'shared/stores/default.store';
+</script>
+
+{#if $isLoading || $isFetchingData}
+	<div />
+{/if}
+
+<style>
+	div {
+		animation: fadeIn 0.2s;
+		position: fixed;
+		top: 2rem;
+		left: 8rem;
+		right: 0;
+		overflow: hidden;
+		height: 0.2rem;
+		background-color: #4e4e4e;
+		border-radius: 45px;
+	}
+
+	div:before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 50%;
+		height: 100%;
+		background-color: var(--color);
+		animation: loader 1.2s infinite ease-in-out;
+	}
+
+	@keyframes fadeIn {
+		0% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes loader {
+		0% {
+			opacity: 0;
+			transform: translateX(-100%);
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+			transform: translateX(100vw);
+		}
+	}
+</style>

src/components/Loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader.svelte';