Skip to content

Commit 43c75a1

Browse files
Oceania2018Oceania2018
authored
Merge pull request #23 from visagang/main
Add global spinner
2 parents 3312997 + 7d9f28d commit 43c75a1

File tree

5 files changed

+137
-110
lines changed

5 files changed

+137
-110
lines changed

‎src/lib/helpers/http.js‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,41 @@
11
import axios from 'axios';
2-
import { getUserStore } from '$lib/helpers/store.js';
2+
import { getUserStore, setGlobalLoad } from '$lib/helpers/store.js';
33

44
// Add a request interceptor to attach authentication tokens or headers
55
axios.interceptors.request.use(
66
(config) => {
7-
// Add your authentication logic here
8-
let user = getUserStore();
9-
let headers = axios.defaults.headers;
10-
// For example, attach an authentication token to the request headers
11-
config.headers.Authorization = `Bearer ${user.token}`;
12-
return config;
7+
// Add your authentication logic here
8+
let user = getUserStore();
9+
setGlobalLoad(true);
10+
let headers = axios.defaults.headers;
11+
// For example, attach an authentication token to the request headers
12+
config.headers.Authorization = `Bearer ${user.token}`;
13+
return config;
1314
},
1415
(error) => {
15-
return Promise.reject(error);
16+
setGlobalLoad(false);
17+
return Promise.reject(error);
1618
}
1719
);
1820

1921
// Add a response interceptor to handle 401 errors globally
2022
axios.interceptors.response.use(
2123
(response) => {
22-
// If the request was successful, return the response
23-
return response;
24+
// If the request was successful, return the response
25+
setGlobalLoad(false);
26+
return response;
2427
},
2528
(error) => {
26-
// If the error status is 401, handle it here
27-
if (error.response && error.response.status === 401) {
28-
// Perform actions like redirecting to the login page or refreshing tokens
29-
// Example: redirect to the login page
30-
window.location.href = '/login';
31-
}
32-
33-
// Return the error to the calling function
34-
return Promise.reject(error);
29+
setGlobalLoad(false);
30+
// If the error status is 401, handle it here
31+
if (error.response && error.response.status === 401) {
32+
// Perform actions like redirecting to the login page or refreshing tokens
33+
// Example: redirect to the login page
34+
window.location.href = '/login';
35+
}
36+
37+
// Return the error to the calling function
38+
return Promise.reject(error);
3539
}
3640
);
3741

‎src/lib/helpers/store.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,13 @@ userStore.subscribe(value => {
2525
if (browser && value.token) {
2626
localStorage.setItem('user', JSON.stringify(value));
2727
}
28-
});
28+
});
29+
30+
export const globalLoaderStore = writable(false);
31+
32+
/**
33+
* @param {boolean} value
34+
*/
35+
export function setGlobalLoad(value){
36+
globalLoaderStore.set(value);
37+
}

‎src/routes/(authentication)/login/+page.svelte‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
import Headtitle from '$lib/common/HeadTitle.svelte';
1616
import { getToken } from '$lib/services/auth-service.js';
1717
import { goto } from '$app/navigation';
18-
import Loader from '$lib/common/Loader.svelte';
1918
import {
2019
PUBLIC_LOGO_URL,
2120
PUBLIC_LOGIN_IMAGE,
@@ -80,9 +79,6 @@
8079
<div class="account-pages my-5 pt-sm-5">
8180
<Container>
8281
<Row class="justify-content-center">
83-
{#if isSubmitting}
84-
<Loader size={50} />
85-
{/if}
8682
<Col md={8} lg={6} xl={5}>
8783
<Card class="overflow-hidden">
8884
<div class="bg-primary-subtle">

‎src/routes/+layout.svelte‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,29 @@
22
import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
33
import en from '$lib/langs/en.json';
44
import '$lib/helpers/http';
5+
import { onMount } from 'svelte';
6+
import { globalLoaderStore } from '$lib/helpers/store';
7+
import Loader from '$lib/common/Loader.svelte';
58
69
addMessages('en', en);
710
811
init({
912
fallbackLocale: 'en',
1013
initialLocale: getLocaleFromNavigator()
1114
});
12-
15+
/**
16+
* @type {boolean}
17+
*/
18+
let isLoading;
19+
onMount(() => {
20+
const subscribe = globalLoaderStore.subscribe((value) => {
21+
isLoading = value;
22+
});
23+
})
1324
</script>
25+
{#if isLoading}
26+
<Loader size={50}/>
27+
{/if}
1428
<slot />
1529

1630
<style lang="scss">

‎src/routes/page/user/me/+page.svelte‎

Lines changed: 89 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -5,99 +5,103 @@
55
import HeadTitle from '$lib/common/HeadTitle.svelte';
66
import { onMount } from 'svelte';
77
import { myInfo } from '$lib/services/auth-service';
8-
import Loader from '$lib/common/Loader.svelte';
98
109
/** @type {import('$types').UserModel} */
1110
let currentUser;
1211
let isLoading = false;
1312
onMount(async () => {
14-
isLoading = true;
15-
await myInfo().then(data => {
16-
currentUser = data;
17-
}).finally(() => {
18-
isLoading = false;
19-
});
13+
isLoading = true;
14+
await myInfo()
15+
.then((data) => {
16+
currentUser = data;
17+
})
18+
.finally(() => {
19+
isLoading = false;
20+
});
2021
});
2122
</script>
2223

2324
<HeadTitle title="My Profile" />
2425
<Breadcrumb title="Home" pagetitle="My Profile" />
25-
{#if isLoading}
26-
<Loader />
27-
{/if}
28-
{#if !isLoading}
29-
<Row>
30-
<Col xl={4}>
31-
<Card class="overflow-hidden">
32-
<div class="bg-primary-subtle">
33-
<Row class="row">
34-
<Col xs={7}>
35-
<div class="text-primary p-3">
36-
<h5 class="text-primary">Welcome Back !</h5>
37-
<p>{PUBLIC_BRAND_NAME}</p>
38-
</div>
39-
</Col>
40-
</Row>
26+
<Row>
27+
<Col xl={4}>
28+
<Card class="overflow-hidden">
29+
<div class="bg-primary-subtle">
30+
<Row class="row">
31+
<Col xs={7}>
32+
<div class="text-primary p-3">
33+
<h5 class="text-primary">Welcome Back !</h5>
34+
<p>{PUBLIC_BRAND_NAME}</p>
35+
</div>
36+
</Col>
37+
</Row>
38+
</div>
39+
<CardBody class="pt-0">
40+
<Row>
41+
<Col sm={4}>
42+
<div class="avatar-md profile-user-wid mb-4">
43+
<img
44+
src="/images/users/user-dummy.jpg"
45+
alt="avatar"
46+
class="img-thumbnail rounded-circle"
47+
/>
48+
</div>
49+
<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
50+
<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? 'Role: N/A'}</p>
51+
</Col>
52+
</Row>
53+
</CardBody>
54+
</Card>
55+
<Card>
56+
<CardBody>
57+
<CardTitle class="mb-4">Personal Information</CardTitle>
58+
<div class="table-responsive">
59+
<Table>
60+
<tbody>
61+
<tr>
62+
<th>First Name:</th>
63+
<td>
64+
{currentUser?.first_name ?? 'N/A'}
65+
</td>
66+
</tr>
67+
<tr>
68+
<th>Last Name:</th>
69+
<td>
70+
{currentUser?.last_name ?? 'N/A'}
71+
</td>
72+
</tr>
73+
<tr>
74+
<th>Email:</th>
75+
<td>
76+
{currentUser?.email ?? 'N/A'}
77+
</td>
78+
</tr>
79+
<tr>
80+
<th>External Id:</th>
81+
<td>
82+
{currentUser?.external_id ?? 'N/A'}
83+
</td>
84+
</tr>
85+
<tr>
86+
<th>Update Date:</th>
87+
<td>
88+
{currentUser?.update_date
89+
? new Date(currentUser?.update_date).toLocaleString()
90+
: 'N/A'}
91+
</td>
92+
</tr>
93+
<tr>
94+
<th>Create Date:</th>
95+
<td>
96+
{currentUser?.create_date
97+
? new Date(currentUser?.create_date).toLocaleString()
98+
: 'N/A'}
99+
</td>
100+
</tr>
101+
</tbody>
102+
</Table>
41103
</div>
42-
<CardBody class="pt-0">
43-
<Row>
44-
<Col sm={4}>
45-
<div class="avatar-md profile-user-wid mb-4">
46-
<img src="/images/users/user-dummy.jpg" alt="avatar" class="img-thumbnail rounded-circle" />
47-
</div>
48-
<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
49-
<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? "Role: N/A"}</p>
50-
</Col>
51-
</Row>
52-
</CardBody>
53-
</Card>
54-
<Card>
55-
<CardBody>
56-
<CardTitle class="mb-4">Personal Information</CardTitle>
57-
<div class="table-responsive">
58-
<Table>
59-
<tbody>
60-
<tr>
61-
<th>First Name:</th>
62-
<td>
63-
{currentUser?.first_name ?? "N/A"}
64-
</td>
65-
</tr>
66-
<tr>
67-
<th>Last Name:</th>
68-
<td>
69-
{currentUser?.last_name ?? "N/A"}
70-
</td>
71-
</tr>
72-
<tr>
73-
<th>Email:</th>
74-
<td>
75-
{currentUser?.email ?? "N/A"}
76-
</td>
77-
</tr>
78-
<tr>
79-
<th>External Id:</th>
80-
<td>
81-
{currentUser?.external_id ?? "N/A"}
82-
</td>
83-
</tr>
84-
<tr>
85-
<th>Update Date:</th>
86-
<td>
87-
{currentUser?.update_date ? new Date(currentUser?.update_date).toLocaleString() : "N/A"}
88-
</td>
89-
</tr>
90-
<tr>
91-
<th>Create Date:</th>
92-
<td>
93-
{currentUser?.create_date ? new Date(currentUser?.create_date).toLocaleString() : "N/A"}
94-
</td>
95-
</tr>
96-
</tbody>
97-
</Table>
98-
</div>
99-
</CardBody>
100-
</Card>
101-
</Col>
102-
</Row>
103-
{/if}
104+
</CardBody>
105+
</Card>
106+
</Col>
107+
</Row>

0 commit comments

Comments
 (0)