Mise en forme basique du loader de module

client/src/components/AppLoader.tsx

@@ -2,6 +2,8 @@ import React, { FunctionComponent } from "react";
 
 export const AppLoader:FunctionComponent = () => {
   return (
-    <div className="loader"></div>
+    <div className="app-loader">
+      <i className="fas fa-spinner fa-spin fa-5x"></i>
+    </div>
   )
 }

client/src/components/ItemPanel.tsx

@@ -1,6 +1,5 @@
 import React, { FunctionComponent, useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import { WithLoader } from "./WithLoader";
 
 export interface Item {
   id: string

client/src/components/ProfilePage/ProfilePage.tsx

@@ -2,19 +2,16 @@ import React from 'react';
 import { Page } from '../Page';
 import { UserForm } from '../UserForm';
 import { User } from '../../types/user';
-import { useUserProfileQuery } from '../../gql/queries/profile';
+import { useUserProfile } from '../../gql/queries/profile';
 import { useUpdateUserProfileMutation } from '../../gql/mutations/profile';
-import { WithLoader } from '../WithLoader';
 
 export function ProfilePage() {
-  const userProfileQuery = useUserProfileQuery();
+  const { user, loading } = useUserProfile();
   const [ updateProfile, updateUserProfileMutation ] = useUpdateUserProfileMutation();
-  const isLoading = updateUserProfileMutation.loading || userProfileQuery.loading;
-
-  const { userProfile } = (userProfileQuery.data || {});
+  const isLoading = updateUserProfileMutation.loading || loading;
 
   const onUserChange = (user: User) => {
-    if (userProfile.name !== user.name) {
+    if (user.name !== user.name) {
       updateProfile({ variables: {changes: { name: user.name }}});
     }
   };
@@ -27,11 +24,7 @@ export function ProfilePage() {
             <div className="column is-6 is-offset-3">
               <div className="box">
                 <h2 className="is-size-2 subtitle">Mon profil</h2>
-                <WithLoader loading={isLoading || !userProfile}>
-                {
-                  <UserForm onChange={onUserChange} user={userProfile} /> 
-                }
-                </WithLoader>
+                <UserForm onChange={onUserChange} user={user} /> 
               </div>
             </div>
           </div>

client/src/components/WithLoader.tsx

@@ -1,18 +0,0 @@
-import React, { Fragment, PropsWithChildren, FunctionComponent } from 'react';
-
-export interface WithLoaderProps {
-  loading?: boolean|boolean[]
-}
-
-export const WithLoader: FunctionComponent<WithLoaderProps> = ({ loading, children }) => {
-  const isLoading = Array.isArray(loading) ? loading.some(l => l) : loading;
-  return (
-    <Fragment>
-      {
-        isLoading ?
-        <div>Chargement</div> :
-        children
-      }
-    </Fragment>
-  )
-}

client/src/components/WorkgroupPage/InfoPanel.tsx

@@ -1,8 +1,6 @@
 import React, { FunctionComponent } from 'react';
-import { User } from '../../types/user';
 import { Workgroup } from '../../types/workgroup';
 import { InfoForm } from './InfoForm';
-import { WithLoader } from '../WithLoader';
 import { useUpdateWorkgroupMutation, useCreateWorkgroupMutation } from '../../gql/mutations/workgroups';
 import { useHistory } from 'react-router';
 
@@ -43,9 +41,7 @@ export const InfoPanel: FunctionComponent<InfoPanelProps> = ({ workgroup }) => {
         Informations
       </p>
       <div className="panel-block">
-        <WithLoader loading={isLoading}>
-          <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} />
-        </WithLoader>
+        { !isLoading ? <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} /> : null }
       </div>
     </nav>
   );

client/src/sass/_loader.scss

@@ -1,44 +1,16 @@
-.loader-container {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    height: 100%;
-    align-items: center;
-}
+.app-loader {
+  @extend body;
 
-.lds-ripple {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-    transform: scale(2);
-}
-
-.lds-ripple div {
-    position: absolute;
-    border: 4px solid $grey;
-    opacity: 1;
-    border-radius: 50%;
-    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-
-.lds-ripple div:nth-child(2) {
-    animation-delay: -0.5s;
-}
-
-@keyframes lds-ripple {
-    0% {
-      top: 36px;
-      left: 36px;
-      width: 0;
-      height: 0;
-      opacity: 1;
-    }
-    100% {
-      top: 0px;
-      left: 0px;
-      width: 72px;
-      height: 72px;
-      opacity: 0;
-    }
-  }
+  display: flex;
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  width: 100vw;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}