Skip to content

Add global spinner #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 23, 2024
Merged

Add global spinner #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 23 additions & 19 deletions src/lib/helpers/http.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,41 @@
import axios from 'axios';
import { getUserStore } from '$lib/helpers/store.js';
import { getUserStore, setGlobalLoad } from '$lib/helpers/store.js';

// Add a request interceptor to attach authentication tokens or headers
axios.interceptors.request.use(
(config) => {
// Add your authentication logic here
let user = getUserStore();
let headers = axios.defaults.headers;
// For example, attach an authentication token to the request headers
config.headers.Authorization = `Bearer ${user.token}`;
return config;
// Add your authentication logic here
let user = getUserStore();
setGlobalLoad(true);
let headers = axios.defaults.headers;
// For example, attach an authentication token to the request headers
config.headers.Authorization = `Bearer ${user.token}`;
return config;
},
(error) => {
return Promise.reject(error);
setGlobalLoad(false);
return Promise.reject(error);
}
);

// Add a response interceptor to handle 401 errors globally
axios.interceptors.response.use(
(response) => {
// If the request was successful, return the response
return response;
// If the request was successful, return the response
setGlobalLoad(false);
return response;
},
(error) => {
// If the error status is 401, handle it here
if (error.response && error.response.status === 401) {
// Perform actions like redirecting to the login page or refreshing tokens
// Example: redirect to the login page
window.location.href = '/login';
}

// Return the error to the calling function
return Promise.reject(error);
setGlobalLoad(false);
// If the error status is 401, handle it here
if (error.response && error.response.status === 401) {
// Perform actions like redirecting to the login page or refreshing tokens
// Example: redirect to the login page
window.location.href = '/login';
}

// Return the error to the calling function
return Promise.reject(error);
}
);

Expand Down
11 changes: 10 additions & 1 deletion src/lib/helpers/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,13 @@ userStore.subscribe(value => {
if (browser && value.token) {
localStorage.setItem('user', JSON.stringify(value));
}
});
});

export const globalLoaderStore = writable(false);

/**
* @param {boolean} value
*/
export function setGlobalLoad(value){
globalLoaderStore.set(value);
}
4 changes: 0 additions & 4 deletions src/routes/(authentication)/login/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
import Headtitle from '$lib/common/HeadTitle.svelte';
import { getToken } from '$lib/services/auth-service.js';
import { goto } from '$app/navigation';
import Loader from '$lib/common/Loader.svelte';
import {
PUBLIC_LOGO_URL,
PUBLIC_LOGIN_IMAGE,
Expand Down Expand Up @@ -80,9 +79,6 @@
<div class="account-pages my-5 pt-sm-5">
<Container>
<Row class="justify-content-center">
{#if isSubmitting}
<Loader size={50} />
{/if}
<Col md={8} lg={6} xl={5}>
<Card class="overflow-hidden">
<div class="bg-primary-subtle">
Expand Down
16 changes: 15 additions & 1 deletion src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,29 @@
import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
import en from '$lib/langs/en.json';
import '$lib/helpers/http';
import { onMount } from 'svelte';
import { globalLoaderStore } from '$lib/helpers/store';
import Loader from '$lib/common/Loader.svelte';

addMessages('en', en);

init({
fallbackLocale: 'en',
initialLocale: getLocaleFromNavigator()
});

/**
* @type {boolean}
*/
let isLoading;
onMount(() => {
const subscribe = globalLoaderStore.subscribe((value) => {
isLoading = value;
});
})
</script>
{#if isLoading}
<Loader size={50}/>
{/if}
<slot />

<style lang="scss">
Expand Down
174 changes: 89 additions & 85 deletions src/routes/page/user/me/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,99 +5,103 @@
import HeadTitle from '$lib/common/HeadTitle.svelte';
import { onMount } from 'svelte';
import { myInfo } from '$lib/services/auth-service';
import Loader from '$lib/common/Loader.svelte';

/** @type {import('$types').UserModel} */
let currentUser;
let isLoading = false;
onMount(async () => {
isLoading = true;
await myInfo().then(data => {
currentUser = data;
}).finally(() => {
isLoading = false;
});
isLoading = true;
await myInfo()
.then((data) => {
currentUser = data;
})
.finally(() => {
isLoading = false;
});
});
</script>

<HeadTitle title="My Profile" />
<Breadcrumb title="Home" pagetitle="My Profile" />
{#if isLoading}
<Loader />
{/if}
{#if !isLoading}
<Row>
<Col xl={4}>
<Card class="overflow-hidden">
<div class="bg-primary-subtle">
<Row class="row">
<Col xs={7}>
<div class="text-primary p-3">
<h5 class="text-primary">Welcome Back !</h5>
<p>{PUBLIC_BRAND_NAME}</p>
</div>
</Col>
</Row>
<Row>
<Col xl={4}>
<Card class="overflow-hidden">
<div class="bg-primary-subtle">
<Row class="row">
<Col xs={7}>
<div class="text-primary p-3">
<h5 class="text-primary">Welcome Back !</h5>
<p>{PUBLIC_BRAND_NAME}</p>
</div>
</Col>
</Row>
</div>
<CardBody class="pt-0">
<Row>
<Col sm={4}>
<div class="avatar-md profile-user-wid mb-4">
<img
src="/images/users/user-dummy.jpg"
alt="avatar"
class="img-thumbnail rounded-circle"
/>
</div>
<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? 'Role: N/A'}</p>
</Col>
</Row>
</CardBody>
</Card>
<Card>
<CardBody>
<CardTitle class="mb-4">Personal Information</CardTitle>
<div class="table-responsive">
<Table>
<tbody>
<tr>
<th>First Name:</th>
<td>
{currentUser?.first_name ?? 'N/A'}
</td>
</tr>
<tr>
<th>Last Name:</th>
<td>
{currentUser?.last_name ?? 'N/A'}
</td>
</tr>
<tr>
<th>Email:</th>
<td>
{currentUser?.email ?? 'N/A'}
</td>
</tr>
<tr>
<th>External Id:</th>
<td>
{currentUser?.external_id ?? 'N/A'}
</td>
</tr>
<tr>
<th>Update Date:</th>
<td>
{currentUser?.update_date
? new Date(currentUser?.update_date).toLocaleString()
: 'N/A'}
</td>
</tr>
<tr>
<th>Create Date:</th>
<td>
{currentUser?.create_date
? new Date(currentUser?.create_date).toLocaleString()
: 'N/A'}
</td>
</tr>
</tbody>
</Table>
</div>
<CardBody class="pt-0">
<Row>
<Col sm={4}>
<div class="avatar-md profile-user-wid mb-4">
<img src="/images/users/user-dummy.jpg" alt="avatar" class="img-thumbnail rounded-circle" />
</div>
<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? "Role: N/A"}</p>
</Col>
</Row>
</CardBody>
</Card>
<Card>
<CardBody>
<CardTitle class="mb-4">Personal Information</CardTitle>
<div class="table-responsive">
<Table>
<tbody>
<tr>
<th>First Name:</th>
<td>
{currentUser?.first_name ?? "N/A"}
</td>
</tr>
<tr>
<th>Last Name:</th>
<td>
{currentUser?.last_name ?? "N/A"}
</td>
</tr>
<tr>
<th>Email:</th>
<td>
{currentUser?.email ?? "N/A"}
</td>
</tr>
<tr>
<th>External Id:</th>
<td>
{currentUser?.external_id ?? "N/A"}
</td>
</tr>
<tr>
<th>Update Date:</th>
<td>
{currentUser?.update_date ? new Date(currentUser?.update_date).toLocaleString() : "N/A"}
</td>
</tr>
<tr>
<th>Create Date:</th>
<td>
{currentUser?.create_date ? new Date(currentUser?.create_date).toLocaleString() : "N/A"}
</td>
</tr>
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
</Row>
{/if}
</CardBody>
</Card>
</Col>
</Row>