feat(client): add loader for apps menu

pkg/sdk/client/src/components/icons/index.ts

@@ -5,5 +5,6 @@ import LoginIcon from './login.svg';
 import HomeIcon from './home.svg';
 import LinkIcon from './link.svg';
 import LogoutIcon from './logout.svg';
+import LoaderIcon from './loader.svg';
 
-export { UserCircleIcon, MenuIcon, CloudIcon, LoginIcon, HomeIcon, LinkIcon, LogoutIcon }
+export { LoaderIcon, UserCircleIcon, MenuIcon, CloudIcon, LoginIcon, HomeIcon, LinkIcon, LogoutIcon }

pkg/sdk/client/src/components/icons/loader.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path fill="none" d="M0 0h24v24H0z"></path> <path d="M12 2a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1zm8.66-10a1 1 0 0 1-.366 1.366l-2.598 1.5a1 1 0 1 1-1-1.732l2.598-1.5A1 1 0 0 1 20.66 7zM7.67 14.5a1 1 0 0 1-.366 1.366l-2.598 1.5a1 1 0 1 1-1-1.732l2.598-1.5a1 1 0 0 1 1.366.366zM20.66 17a1 1 0 0 1-1.366.366l-2.598-1.5a1 1 0 0 1 1-1.732l2.598 1.5A1 1 0 0 1 20.66 17zM7.67 9.5a1 1 0 0 1-1.366.366l-2.598-1.5a1 1 0 1 1 1-1.732l2.598 1.5A1 1 0 0 1 7.67 9.5z"></path> </g> </g></svg>

pkg/sdk/client/src/components/loader.ts

@@ -0,0 +1,57 @@
+import { LitElement, html, css } from 'lit';
+import { LoaderIcon } from './icons';
+
+export class Loader extends LitElement {
+    static styles = css`
+    :host {
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+        border-bottom: 1px solid rgb(229,231,235);
+        border-top: 10px solid transparent;
+        background-color: #fff;
+        min-height: 50px;
+        padding: 10px 0;
+    }
+
+    .container {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+        font-size: 14px;
+        color: black;
+    }
+
+    .icon {
+        height: 35px;
+        animation-duration: 3s;
+        animation-name: spin;
+        animation-iteration-count: infinite;
+    }
+
+    @keyframes spin {
+        from {
+          transform: rotateZ(0deg);
+        }
+      
+        to {
+            transform: rotateZ(360deg);
+        }
+    }
+    `;
+
+    constructor() {
+        super();
+    }
+
+    render() {
+        return html`
+            <div class="container">
+                <img class="icon" src="${LoaderIcon}" />
+                Chargement en cours
+            </div>
+        `
+    }
+}

pkg/sdk/client/src/components/menu.ts

@@ -49,6 +49,9 @@ export class Menu extends LitElement {
     @property()
     _profile: Profile
 
+    @property()
+    _loading: boolean = false
+
     static styles = css`
     :host {
         position: fixed;
@@ -95,6 +98,7 @@ export class Menu extends LitElement {
     }
 
     _fetchApps() {
+        this._loading = true;
         return fetch(`${BASE_API_URL}/apps`)
             .then(res => res.json())
             .then(result => {
@@ -130,9 +134,14 @@ export class Menu extends LitElement {
                 return Promise.all(promises);
             })
             .then((manifests: Manifest[]) => {
+                this._loading = false
                 this._apps = manifests;
             })
-            .catch(err => console.error(err))
+            .catch(err => {
+                console.error(err);
+                this._loading = false;
+            })
+            
     }
 
     _fetchProfile() {
@@ -158,19 +167,24 @@ export class Menu extends LitElement {
     }
 
     _renderApps() {
-        const apps = this._apps
+        let apps;
-            .filter(manifest => this._canAccess(manifest))
+        if (this._loading) {
-            .map(manifest => {
+            apps = [ html`<edge-loader></edge-loader>` ]
-                const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
+        } else {
-                return html`
+            apps = this._apps
-                    <edge-menu-sub-item 
+                .filter(manifest => this._canAccess(manifest))
-                        name='${ manifest.id }' 
+                .map(manifest => {
-                        label='${ manifest.title }' 
+                    const iconUrl = ( ( manifest.url || '') + ( manifest.metadata?.paths?.icon || '' ) ) || LinkIcon;
-                        icon-url='${ iconUrl }' 
+                    return html`
-                        link-url='${ manifest.url || '#' }'>
+                        <edge-menu-sub-item 
-                    </edge-menu-sub-item>
+                            name='${ manifest.id }' 
-                `
+                            label='${ manifest.title }' 
-            });
+                            icon-url='${ iconUrl }' 
+                            link-url='${ manifest.url || '#' }'>
+                        </edge-menu-sub-item>
+                    `
+                });
+        }
 
         return html`
             <edge-menu-item name='apps' label='Apps' icon-url='${CloudIcon}'>

pkg/sdk/client/src/index.ts

@@ -6,10 +6,12 @@ import { MenuItem as MenuItemElement } from './components/menu-item.js';
 import { MenuSubItem as MenuSubItemElement } from './components/menu-sub-item.js';
 import { CrossFrameMessenger } from './crossframe-messenger.js';
 import { MenuManager } from './menu-manager.js';
+import { Loader } from './components/loader';
 
 customElements.define('edge-menu', MenuElement);
 customElements.define('edge-menu-item', MenuItemElement);
 customElements.define('edge-menu-sub-item', MenuSubItemElement);
+customElements.define('edge-loader', Loader);
 
 export const Client = new EdgeClient();
 export const Frame = new CrossFrameMessenger();