From 655ecd1a0fbc9a65455af373dc663d5db605b8cb Mon Sep 17 00:00:00 2001
From: William Petit
Date: Tue, 13 Oct 2020 13:47:29 +0200
Subject: [PATCH] Mise en forme basique du loader de module
---
client/src/components/AppLoader.tsx | 4 +-
client/src/components/ItemPanel.tsx | 1 -
.../components/ProfilePage/ProfilePage.tsx | 17 ++----
client/src/components/WithLoader.tsx | 18 ------
.../components/WorkgroupPage/InfoPanel.tsx | 6 +-
client/src/sass/_loader.scss | 58 +++++--------------
6 files changed, 24 insertions(+), 80 deletions(-)
delete mode 100644 client/src/components/WithLoader.tsx
diff --git a/client/src/components/AppLoader.tsx b/client/src/components/AppLoader.tsx
index aabcc47..ab26a89 100644
--- a/client/src/components/AppLoader.tsx
+++ b/client/src/components/AppLoader.tsx
@@ -2,6 +2,8 @@ import React, { FunctionComponent } from "react";
export const AppLoader:FunctionComponent = () => {
return (
-
+
+
+
)
}
\ No newline at end of file
diff --git a/client/src/components/ItemPanel.tsx b/client/src/components/ItemPanel.tsx
index 14be08f..2989d05 100644
--- a/client/src/components/ItemPanel.tsx
+++ b/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
diff --git a/client/src/components/ProfilePage/ProfilePage.tsx b/client/src/components/ProfilePage/ProfilePage.tsx
index 2475ee2..33c9ea8 100644
--- a/client/src/components/ProfilePage/ProfilePage.tsx
+++ b/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() {
Mon profil
-
- {
-
- }
-
+
diff --git a/client/src/components/WithLoader.tsx b/client/src/components/WithLoader.tsx
deleted file mode 100644
index cbc55fb..0000000
--- a/client/src/components/WithLoader.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Fragment, PropsWithChildren, FunctionComponent } from 'react';
-
-export interface WithLoaderProps {
- loading?: boolean|boolean[]
-}
-
-export const WithLoader: FunctionComponent = ({ loading, children }) => {
- const isLoading = Array.isArray(loading) ? loading.some(l => l) : loading;
- return (
-
- {
- isLoading ?
- Chargement
:
- children
- }
-
- )
-}
\ No newline at end of file
diff --git a/client/src/components/WorkgroupPage/InfoPanel.tsx b/client/src/components/WorkgroupPage/InfoPanel.tsx
index ac69d55..b5ba6eb 100644
--- a/client/src/components/WorkgroupPage/InfoPanel.tsx
+++ b/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 = ({ workgroup }) => {
Informations
-
-
-
+ { !isLoading ? : null }
);
diff --git a/client/src/sass/_loader.scss b/client/src/sass/_loader.scss
index 7e2b5d1..7658c8d 100644
--- a/client/src/sass/_loader.scss
+++ b/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;
+}
\ No newline at end of file