From ad88494af873c9b50fad2c3daaf8e4eb14205550 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 26 Aug 2020 17:41:14 +0200
Subject: [PATCH 01/12] feature: add loader to left-menu > members

---
 src/menu-left.pug         |  7 ++++
 src/styles/base/main.scss | 73 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/src/menu-left.pug b/src/menu-left.pug
index 771db32..5ddfc4f 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -120,9 +120,16 @@ 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
+        #loader.loader I am coming...!
+        div.lds-ellipsis
+          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'
           search-fields="name"
           search-label-name="Rechercher..."
           search-widget-name="hubl-search-users"
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 23a12a6..9af4c97 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -279,6 +279,79 @@ h5 {
   width: 15vw;
 }
 
+
+
+.loader {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.loader div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.loader div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.loader div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.loader div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.loader 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);
+  }
+}
+
+
+
+
+
 .content-box {
   @include window-style-modal();
   flex-direction: column;

From 70418f75b3e93952d59e63773b05bf487b9c7511 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 28 Aug 2020 09:39:59 +0200
Subject: [PATCH 02/12] loader for left-menu members added

---
 src/menu-left.pug         |  3 +--
 src/styles/base/main.scss | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/menu-left.pug b/src/menu-left.pug
index 5ddfc4f..e8a28f6 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -120,8 +120,7 @@ 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
-        #loader.loader I am coming...!
-        div.lds-ellipsis
+        div#loader.loader
           div
           div
           div
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 9af4c97..c29f078 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -282,19 +282,19 @@ h5 {
 
 
 .loader {
-  display: inline-block;
+  margin: 0 auto;
   position: relative;
   width: 80px;
-  height: 80px;
+  height: 20px;
 }
 
 .loader div {
   position: absolute;
   top: 33px;
-  width: 13px;
-  height: 13px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: #fff;
+  background: var(--color-white);
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 

From 4379359bffd9eb2b006bb9d1c084a88caea38766 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 28 Aug 2020 11:31:11 +0200
Subject: [PATCH 03/12] loader for circle admin list added

---
 src/menu-left.pug                      |  4 ++--
 src/styles/base/main.scss              | 13 +++++++++----
 src/views/admin/page-admin-circles.pug |  7 +++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/menu-left.pug b/src/menu-left.pug
index e8a28f6..9667003 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -120,7 +120,7 @@ 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.loader
+        div#loader-messages.loader.loader-color-menu
           div
           div
           div
@@ -128,7 +128,7 @@ solid-router#navbar-router(default-route='dashboard')
         solid-display.nosub.message-tab(
           data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
           fields='name, chatProfile.jabberID, badge'
-          loader-id='loader'
+          loader-id='loader-messages'
           search-fields="name"
           search-label-name="Rechercher..."
           search-widget-name="hubl-search-users"
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index c29f078..9431d7b 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -290,12 +290,17 @@ h5 {
 
 .loader div {
   position: absolute;
-  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: var(--color-menu-background);
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.loader.loader-menu div {
   width: 8px;
   height: 8px;
-  border-radius: 50%;
-  background: var(--color-white);
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  background: var(--color-menu-text);
 }
 
 .loader div:nth-child(1) {
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index 3e6c2ef..ab39956 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -37,6 +37,12 @@
           class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
           next='admin-circle-create'
         ) Créer un cercle
+      
+      div#loader-admin-circle.loader
+        div
+        div
+        div
+        div
 
       .table-wrapper
         .table
@@ -66,6 +72,7 @@
             bind-user
             nested-field='circles'
             fields='circle.name, circle.owner, leaveButton'
+            loader-id='loader-admin-circle'
 
             class-circle.name='w280 border cell-with-name'
             class-circle.owner='w280 border cell-with-id-card'

From db2f343518783411d66dd63c4104f6e6bf03ce43 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 28 Aug 2020 13:46:25 +0200
Subject: [PATCH 04/12] loader for left-menu projects and circles added

---
 src/menu-left.pug | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/menu-left.pug b/src/menu-left.pug
index 9667003..6538c09 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,7 +132,7 @@ 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-color-menu
+        div#loader-messages.loader.loader-menu
           div
           div
           div

From 31091c16cef42e68d1451b12b5c16e40ada0e3c7 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 28 Aug 2020 14:06:27 +0200
Subject: [PATCH 05/12] loader for users and projects panels added

---
 src/views/admin/page-admin-circles.pug  | 4 ++--
 src/views/admin/page-admin-projects.pug | 8 ++++++++
 src/views/admin/page-admin-users.pug    | 6 ++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index ab39956..a8e26de 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -38,7 +38,7 @@
           next='admin-circle-create'
         ) Créer un cercle
       
-      div#loader-admin-circle.loader
+      div#loader-admin-circles.loader
         div
         div
         div
@@ -72,7 +72,7 @@
             bind-user
             nested-field='circles'
             fields='circle.name, circle.owner, leaveButton'
-            loader-id='loader-admin-circle'
+            loader-id='loader-admin-circles'
 
             class-circle.name='w280 border cell-with-name'
             class-circle.owner='w280 border cell-with-id-card'
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index 56da86e..72f3f8b 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
+        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.pug b/src/views/admin/page-admin-users.pug
index 84cd0e7..d56540d 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
+        div
+        div
+        div
+        div
 
   #admin-users-create.content-box__height(hidden)
     include page-admin-users-create.pug

From 0d9f14905416b5904e3703ccd1020c966ae21802 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 31 Aug 2020 10:24:12 +0200
Subject: [PATCH 06/12] loaders for admin pages moved

---
 src/styles/base/main.scss               | 62 +++++++++++++------------
 src/views/admin/page-admin-circles.pug  | 11 ++---
 src/views/admin/page-admin-projects.pug |  2 +-
 src/views/admin/page-admin-users.pug    |  2 +-
 4 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 9431d7b..1484def 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -286,41 +286,45 @@ h5 {
   position: relative;
   width: 80px;
   height: 20px;
-}
 
-.loader 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-top {
+    top: 30px;
+  }
 
-.loader.loader-menu div {
-  width: 8px;
-  height: 8px;
-  background: var(--color-menu-text);
-}
+  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 div:nth-child(1) {
-  left: 8px;
-  animation: lds-ellipsis1 0.6s infinite;
-}
+  &.loader-menu div {
+    width: 8px;
+    height: 8px;
+    background: var(--color-menu-text);
+  }
 
-.loader div:nth-child(2) {
-  left: 8px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
+  div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
 
-.loader div:nth-child(3) {
-  left: 32px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
+  div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
 
-.loader div:nth-child(4) {
-  left: 56px;
-  animation: lds-ellipsis3 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 {
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index a8e26de..166c9b6 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -37,12 +37,6 @@
           class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
           next='admin-circle-create'
         ) Créer un cercle
-      
-      div#loader-admin-circles.loader
-        div
-        div
-        div
-        div
 
       .table-wrapper
         .table
@@ -119,6 +113,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.pug b/src/views/admin/page-admin-projects.pug
index 72f3f8b..c0268b6 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@@ -138,7 +138,7 @@
             order-by="name"
           )
 
-      div#loader-admin-projects.loader
+      div#loader-admin-projects.loader.loader-top
         div
         div
         div
diff --git a/src/views/admin/page-admin-users.pug b/src/views/admin/page-admin-users.pug
index d56540d..5494220 100644
--- a/src/views/admin/page-admin-users.pug
+++ b/src/views/admin/page-admin-users.pug
@@ -54,7 +54,7 @@
             order-by='username'
           )
 
-      div#loader-admin-users.loader
+      div#loader-admin-users.loader.loader-top
         div
         div
         div

From 430ab36dc7f3503f087eb0fc97af5e8c7faf68d5 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 31 Aug 2020 11:15:10 +0200
Subject: [PATCH 07/12] loaders for admin-create and -edit added

---
 src/views/admin/page-admin-circles-create.pug  | 7 +++++++
 src/views/admin/page-admin-projects-create.pug | 7 +++++++
 src/views/admin/page-admin-users-create.pug    | 7 +++++++
 src/views/admin/page-admin-users-edit.pug      | 8 ++++++++
 4 files changed, 29 insertions(+)

diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug
index ee876f5..0572b8f 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-projects-create.pug b/src/views/admin/page-admin-projects-create.pug
index de5e6d6..6125964 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), logo'
+    loader-id='loader-projects-create'
 
     label-status='Statut du cercle*'
     widget-status='hubl-status'
diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug
index f52dc81..03b4661 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 7873cc4..99ef0df 100644
--- a/src/views/admin/page-admin-users-edit.pug
+++ b/src/views/admin/page-admin-users-edit.pug
@@ -3,6 +3,13 @@ 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'
@@ -12,6 +19,7 @@ div.content-box__info.flex
     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'

From cf6777ae3f4d193d1b79c2bfea344b2d556100a4 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 31 Aug 2020 12:04:51 +0200
Subject: [PATCH 08/12] loaders for circle pages added

---
 src/views/circle/page-circle-edit.pug    | 7 +++++++
 src/views/circle/page-circle-profile.pug | 8 ++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug
index 0b30466..41e4903 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 5d37887..f92cbb5 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'

From ed76354912a1899a540674beed942234e61a6476 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 31 Aug 2020 15:55:31 +0200
Subject: [PATCH 09/12] loader moved to components

---
 src/styles/base/main.scss                 | 82 -----------------------
 src/styles/components/loader.scss         | 75 +++++++++++++++++++++
 src/styles/index.scss                     |  1 +
 src/views/admin/page-admin-circles.pug    |  1 +
 src/views/admin/page-admin-users-edit.pug |  1 +
 5 files changed, 78 insertions(+), 82 deletions(-)
 create mode 100644 src/styles/components/loader.scss

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 1484def..23a12a6 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -279,88 +279,6 @@ h5 {
   width: 15vw;
 }
 
-
-
-.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);
-  }
-}
-
-
-
-
-
 .content-box {
   @include window-style-modal();
   flex-direction: column;
diff --git a/src/styles/components/loader.scss b/src/styles/components/loader.scss
new file mode 100644
index 0000000..eef86ae
--- /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 1458359..e92bc08 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.pug b/src/views/admin/page-admin-circles.pug
index 166c9b6..b545c7b 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -102,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'
diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug
index 99ef0df..13a9e9a 100644
--- a/src/views/admin/page-admin-users-edit.pug
+++ b/src/views/admin/page-admin-users-edit.pug
@@ -13,6 +13,7 @@ div.content-box__info.flex
     solid-display(
       bind-resources=''
       fields='name'
+      loader-id='loader-users-edit'
     )  
 
   solid-form.form.button-register(

From bc1830a9b3839f6906ce5125f5a6676304c64066 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 2 Sep 2020 14:57:30 +0200
Subject: [PATCH 10/12] loader: beta version of directory, dashboard and
 job-board

---
 src/dependencies.pug | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 526a65f..ee54ba7 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@beta" 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@beta" 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@beta" defer)
     //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
 
 if endpoints.users || (endpoints.get && endpoints.get.users)

From a48d854de60583e539cb704c69b5aec0f2d4ae82 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 2 Sep 2020 16:48:55 +0200
Subject: [PATCH 11/12] minor: up dependancies (loaders)

---
 src/dependencies.pug | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index ee54ba7..9453adb 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@beta" 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@beta" defer)
+    script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.6" 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@beta" 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)

From e28cbd980591addbd1f2357c8df26be5a45d5aa8 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 2 Sep 2020 17:22:29 +0000
Subject: [PATCH 12/12] fix: version

---
 src/dependencies.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 9453adb..a688ab5 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -23,7 +23,7 @@ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
     //- 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.6" 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)