feat(user): adding user svg during avatar loading

Author: Debaerdm

src/components/Avatar/Avatar.svelte

@@ -3,6 +3,7 @@
 	import Icons from 'components/icons';
 	import { ProviderEnum } from '../../models/skizzle/ProviderEnum';
 	import { Service } from 'services/Service';
+	import { settings } from 'shared/stores/default.store';
 	export let pullRequest: PullRequestType;
 	export let className: string;
 
@@ -55,7 +56,7 @@
 <div class={`container ${className || ''}`}>
 	{#await Service.getAvatar(pullRequest.provider, pullRequest.user.avatar, pullRequest.organizationName)}
 		<div class="avatar">
-			<p>Chargement...</p>
+			<svelte:component this={Icons.User} color={$settings.theme}/>
 		</div>
 	{:then avatar}
 		<div class="avatar"><img src={avatar} alt={pullRequest.user.name} /></div>
@@ -65,6 +66,8 @@
 			</div>
 		{/if}
 	{:catch}
-		<p>Erreur</p>
+		<div class="avatar">
+			<svelte:component this={Icons.User} color={$settings.theme}/>
+		</div>
 	{/await}
 </div>

src/components/icons/User.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let color: string;
+</script>
+
+<svg 
+  id="d79f8f7b-85a0-47dd-be6a-2e9cd54f2982"
+  data-name="svg"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16">
+    <path 
+    fill="transparent" 
+    stroke={color}
+    stroke-width="0.5" 
+    d="M8,8A2.67,2.67,0,1,0,5.33,5.33,2.67,2.67,0,0,0,8,8ZM8,9.33c-1.78,0-5.33.89-5.33,2.67v1.33H13.33V12C13.33,10.23,9.78,9.33,8,9.33Z"/>
+</svg>

src/components/icons/index.ts

@@ -8,6 +8,7 @@ import AzureDevOps from './AzureDevOps.svelte';
 import Github from './Github.svelte';
 import Ellipsis from './Ellipsis.svelte';
 import Plus from './Plus.svelte';
+import User from './User.svelte';
 
 export default {
 	List,
@@ -20,4 +21,5 @@ export default {
 	Github,
 	Ellipsis,
 	Plus,
+	User,
 };

src/shared/stores/default.store.ts

@@ -18,16 +18,24 @@ export const isLoading = createStore<boolean>(false, {});
 export const isFetchingData = createStore<boolean>(false, {});
 export const settings = createStore<SettingsType>(
 	{
-		refresh_delay: 1,
+		refresh_delay: 5,
 		launch_at_startup: false,
 		proxy: '',
 		theme: ThemeEnum.Orange,
 		language: 'en',
 	},
 	{
 		key: 'settings',
-		subscriber: ({ launch_at_startup }) => {
-			app.send('launch-startup', launch_at_startup);
+		subscriber: initialValue => settings => {
+			Object.keys(initialValue).forEach(element => {
+				let property = settings[element];
+
+				if (!property) {
+					settings[element] = initialValue[element];
+				}
+			});
+
+			app.send('launch-startup', settings.launch_at_startup);
 		},
 	},
 );

src/shared/stores/store.ts

@@ -1,11 +1,11 @@
 import type { ProviderEnum } from 'models/skizzle';
 import { addItem, getItem } from 'shared/utils';
-import { get, writable } from 'svelte/store';
+import { get, Writable, writable } from 'svelte/store';
 
 type StoreOptionsType<T> = {
 	key?: string;
 	predicate?: (value?: T, provider?: ProviderEnum) => T;
-	subscriber?: (value: T) => void;
+	subscriber?: (initialValue: T) => (value: T) => void;
 };
 
 export const createStore = <T>(
@@ -18,7 +18,7 @@ export const createStore = <T>(
 	const { subscribe, set, update } = store;
 
 	if (subscriber) {
-		subscribe(subscriber);
+		subscribe(subscriber(initialValue));
 	}
 
 	if (key) {