diff --git a/src/dependencies.pug b/src/dependencies.pug
index 526a65f0fee4c669ea9c2d1a10a0b02149254f8f..a688ab526ea919f33b3c45286ead8cbdcdb37043 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -19,15 +19,15 @@ if endpoints.events || (endpoints.get && endpoints.get.events)
//- script(type="module" src="/lib/sib-event/sib-event.js" defer)
if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.5" defer)
+ script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.6" defer)
//- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.5" defer)
+ script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.7" defer)
//- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
- script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.2" defer)
+ script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.3" defer)
//- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
if endpoints.users || (endpoints.get && endpoints.get.users)
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 771db326574c88c6c79f7dce2fb0d67b6880b8a1..6538c0988c630a3b26fc3585f76b9061945fb80d 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -79,10 +79,16 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-icon.icon-folder-alt
solid-route(name='project', rdf-type='hd:project', use-id='', hidden)
div.sub-menu.menu-notification
+ div#loader-projects.loader.loader-menu
+ div
+ div
+ div
+ div
solid-display.project-tab(
bind-user
nested-field='projects'
fields='project'
+ loader-id='loader-projects'
empty-widget='hubl-create'
empty-value='projet'
widget-project='hubl-menu-fix-url-project'
@@ -100,10 +106,16 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-icon.icon-folder-alt
solid-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
div.sub-menu.menu-notification
+ div#loader-circles.loader.loader-menu
+ div
+ div
+ div
+ div
solid-display.circle-tab(
bind-user
nested-field='circles'
fields='circle'
+ loader-id='loader-circles'
empty-widget='hubl-create'
empty-value='cercle'
widget-circle='hubl-menu-fix-url-circle'
@@ -120,9 +132,15 @@ solid-router#navbar-router(default-route='dashboard')
div.menu-icon.icon-envelope-letter
solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
div.sub-menu.menu-notification
+ div#loader-messages.loader.loader-menu
+ div
+ div
+ div
+ div
solid-display.nosub.message-tab(
data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
fields='name, chatProfile.jabberID, badge'
+ loader-id='loader-messages'
search-fields="name"
search-label-name="Rechercher..."
search-widget-name="hubl-search-users"
diff --git a/src/styles/components/loader.scss b/src/styles/components/loader.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eef86aefd447bb2adf2d7133e94096f559eacd4a
--- /dev/null
+++ b/src/styles/components/loader.scss
@@ -0,0 +1,75 @@
+.loader {
+ margin: 0 auto;
+ position: relative;
+ width: 80px;
+ height: 20px;
+
+ &.loader-top {
+ top: 30px;
+ }
+
+ div {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ border-radius: 50%;
+ background: var(--color-menu-background);
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
+ }
+
+ &.loader-menu div {
+ width: 8px;
+ height: 8px;
+ background: var(--color-menu-text);
+ }
+
+ div:nth-child(1) {
+ left: 8px;
+ animation: lds-ellipsis1 0.6s infinite;
+ }
+
+ div:nth-child(2) {
+ left: 8px;
+ animation: lds-ellipsis2 0.6s infinite;
+ }
+
+ div:nth-child(3) {
+ left: 32px;
+ animation: lds-ellipsis2 0.6s infinite;
+ }
+
+ div:nth-child(4) {
+ left: 56px;
+ animation: lds-ellipsis3 0.6s infinite;
+ }
+}
+
+@keyframes lds-ellipsis1 {
+ 0% {
+ transform: scale(0);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes lds-ellipsis3 {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(0);
+ }
+}
+
+@keyframes lds-ellipsis2 {
+ 0% {
+ transform: translate(0, 0);
+ }
+
+ 100% {
+ transform: translate(24px, 0);
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 14583599d316febcf6d45501c552e59af42e1e18..e92bc0861dcc29a02376cdbe79de610781dd41bd 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -6,6 +6,7 @@
@import 'abstracts/fonts';
@import 'abstracts/variables';
@import 'abstracts/mixins';
+@import 'components/loader';
@import 'components/icons/index';
@import 'base/main';
@import 'base/about';
diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug
index ee876f5b904a9e8422eb31fe942d52e35646a985..0572b8fef5de4817890b36537b3628a35392ef0e 100644
--- a/src/views/admin/page-admin-circles-create.pug
+++ b/src/views/admin/page-admin-circles-create.pug
@@ -3,10 +3,17 @@ div.content-box__info.flex
h1.centered Créer un cercle
+ div#loader-circles-create.loader.loader-top
+ div
+ div
+ div
+ div
+
solid-form.form.button-register(
data-src=`${endpoints.circles || endpoints.post.circles}`
fields='status, name, description'
+ loader-id='loader-circles-create'
class-status='form-label is-light is-full-width color'
class-name='form-label is-light is-full-width input-text-like'
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index 3e6c2efb44528272f9c0437f832301f31d0696f8..b545c7b07a7aad5ac9a468a6cf46aa22994f9b59 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -66,6 +66,7 @@
bind-user
nested-field='circles'
fields='circle.name, circle.owner, leaveButton'
+ loader-id='loader-admin-circles'
class-circle.name='w280 border cell-with-name'
class-circle.owner='w280 border cell-with-id-card'
@@ -101,6 +102,7 @@
data-src=`${endpoints.circles || endpoints.get.circles}joinable/`
fields='name, owner, members'
+ loader-id='loader-admin-circles'
class-name='w280 border cell-with-name'
class-owner='w280 border cell-with-id-card'
@@ -112,6 +114,11 @@
order-by="name"
)
+ div#loader-admin-circles.loader.loader-top
+ div
+ div
+ div
+ div
#admin-circle-create.content-box__height(hidden)
include page-admin-circles-create.pug
diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug
index 4007644e8cacfc52890610c26698ef565e5da766..0198aa43f9a87cf4ea35f1bb8ded2ad0de753385 100644
--- a/src/views/admin/page-admin-projects-create.pug
+++ b/src/views/admin/page-admin-projects-create.pug
@@ -14,10 +14,17 @@ div.content-box__info.flex
h1.centered Créer un nouveau projet
+ div#loader-projects-create.loader.loader-top
+ div
+ div
+ div
+ div
+
solid-form.form.button-register(
data-src=`${endpoints.projects || endpoints.post.projects}`
fields='status, line-1(customer.name, name), description, line-2(captain)'
+ loader-id='loader-projects-create'
label-status='Statut du cercle*'
widget-status='solid-form-hidden'
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index 56da86ee60892b7e8f0e3119dcde6235f7e6ab0f..c0268b65865b91638d705f06fb93d4c0ed0ad152 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@@ -82,6 +82,7 @@
bind-user
nested-field="projects"
fields='project.name, project.members, project.captain, leaveButton'
+ loader-id='loader-admin-projects'
class-project.name='w280 cell border cell-with-name'
class-project.members='w280 cell border cell-with-id-card'
@@ -121,6 +122,7 @@
data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
fields='name, members, captain, joinButton'
+ loader-id='loader-admin-projects'
class-name='w280 cell border cell-with-name'
class-members='w280 cell border cell-with-id-card'
@@ -136,5 +138,11 @@
order-by="name"
)
+ div#loader-admin-projects.loader.loader-top
+ div
+ div
+ div
+ div
+
#admin-project-create(hidden)
include page-admin-projects-create.pug
\ No newline at end of file
diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug
index f52dc813c2ca679071f670b2e946ca0cd759f201..03b46611afd8b81396273835a07be144b3deaba6 100644
--- a/src/views/admin/page-admin-users-create.pug
+++ b/src/views/admin/page-admin-users-create.pug
@@ -3,10 +3,17 @@ div.content-box__info.flex
h1.centered Ajouter un utilisateur à la plateforme
+ div#loader-users-create.loader.loader-top
+ div
+ div
+ div
+ div
+
solid-form.form.button-register(
data-src=`${endpoints.users || endpoints.post.users}`
fields='line-1(first_name, last_name), line-2(username, email), line-3(password)'
+ loader-id='loader-users-create'
class-first_name='form-label is-light is-half-width input-text-like'
class-last_name='form-label is-light is-half-width input-text-like'
diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug
index 7873cc4f590028d86ed465929eb06e98a335c85b..13a9e9a08337642ee75bdd54c407c8ca7e383eb7 100644
--- a/src/views/admin/page-admin-users-edit.pug
+++ b/src/views/admin/page-admin-users-edit.pug
@@ -3,15 +3,24 @@ div.content-box__info.flex
h1.centered
span Modifier un utilisateur
+
+ div#loader-users-edit.loader.loader-top
+ div
+ div
+ div
+ div
+
solid-display(
bind-resources=''
fields='name'
+ loader-id='loader-users-edit'
)
solid-form.form.button-register(
bind-resources=''
fields='line-1(first_name, last_name), line-2(email)'
+ loader-id='loader-users-edit'
class-first_name='form-label is-light is-half-width input-text-like'
class-last_name='form-label is-light is-half-width input-text-like'
diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug
index 84cd0e78cbafe99f79fed67a2abf7ff3f552abd8..5494220ca86924c542e102b04a80b9568dca740f 100644
--- a/src/views/admin/page-admin-users.pug
+++ b/src/views/admin/page-admin-users.pug
@@ -38,6 +38,7 @@
class='table-body'
data-src=`${endpoints.users || endpoints.get.users}`
fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
+ loader-id='loader-admin-users'
class-account.picture='avatar user-thumb__picture'
class-name='user-thumb__name'
@@ -53,6 +54,11 @@
order-by='username'
)
+ div#loader-admin-users.loader.loader-top
+ div
+ div
+ div
+ div
#admin-users-create.content-box__height(hidden)
include page-admin-users-create.pug
diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug
index 0b30466ca5a0aef88f4802bdb275f166436a1e08..41e4903bc4d58db264daa10ad38456dc5713f025 100644
--- a/src/views/circle/page-circle-edit.pug
+++ b/src/views/circle/page-circle-edit.pug
@@ -46,6 +46,12 @@ div.content-box__info
solid-ac-checker(permission='acl:Write', bind-resources)
h1 Modifie ton cercle
+ div#loader-circle-edit.loader.loader-top
+ div
+ div
+ div
+ div
+
solid-form.form.button-register(
bind-resources
@@ -99,6 +105,7 @@ div.content-box__info
class='table-body'
bind-resources
fields='members'
+ loader-id='loader-circle-edit'
multiple-members=''
widget-members='hubl-team-template-edit'
diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug
index 5d37887d9f0bafe6acbee54c1c1c2cb3b122a35e..f92cbb579e4900f3a0c0cc02e2e75e547f28ad09 100644
--- a/src/views/circle/page-circle-profile.pug
+++ b/src/views/circle/page-circle-profile.pug
@@ -7,10 +7,17 @@ solid-router(default-route='circle-profile', hidden)
.content-box__info.flex
+ div#loader-circle-profile.loader
+ div
+ div
+ div
+ div
+
.flex.space-between.with-padding.mobile-vertical-align
solid-display.mobile-margin__bottom(
bind-resources
fields='creationDateSet(title, creationDate)'
+ loader-id='loader-circle-profile'
class-title='word-spacing-right'
@@ -74,6 +81,7 @@ solid-router(default-route='circle-profile', hidden)
solid-display.block(
bind-resources
fields='members'
+ loader-id='loader-circle-profile'
multiple-members=''
widget-members='hubl-circle-team-template'