style(openAlex loader): change style

dataesr · Nov 13, 2024 · d0bef59 · d0bef59
1 parent 2171b96
commit d0bef59
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 37 deletions.
diff --git a/client/src/pages/openalex-ror/openalexTab.jsx b/client/src/pages/openalex-ror/openalexTab.jsx
@@ -1,9 +1,6 @@
 import {
   Button,
-  Col,
-  Container,
   Modal, ModalContent, ModalFooter, ModalTitle,
-  Row,
   TextInput,
 } from '@dataesr/dsfr-plus';
 import PropTypes from 'prop-types';

diff --git a/client/src/pages/openalex-ror/results.jsx b/client/src/pages/openalex-ror/results.jsx
@@ -1,4 +1,4 @@
-import { Col, Container, Row, Spinner } from '@dataesr/dsfr-plus';
+import { Col, Container, Row, Spinner, Text } from '@dataesr/dsfr-plus';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -9,9 +9,7 @@ import { getAffiliationsCorrections } from '../../utils/curations';
 import { isRor } from '../../utils/ror';
 import { normalize } from '../../utils/strings';
 import { getWorks } from '../../utils/works';
-import ExportErrorsButton from './export-errors-button';
 import OpenalexTab from './openalexTab';
-import SendFeedbackButton from './send-feedback-button';
 
 import 'primereact/resources/primereact.min.css';
 import 'primereact/resources/themes/lara-light-indigo/theme.css';
@@ -20,7 +18,6 @@ const { VITE_APP_TAG_LIMIT } = import.meta.env;
 
 export default function Affiliations() {
   const [searchParams] = useSearchParams();
-
   const [affiliations, setAffiliations] = useState([]);
   const [allOpenalexCorrections, setAllOpenalexCorrections] = useState([]);
   const [options, setOptions] = useState({});
@@ -91,54 +88,47 @@ export default function Affiliations() {
     setAffiliations(data?.affiliations ?? []);
   }, [data]);
 
+  const openAlexAffiliations = affiliations.filter((affiliation) => affiliation.source === 'OpenAlex');
+
   return (
     <>
       <Header isSticky />
-      <Container fluid as="section" className="wm-bg">
+      <Container fluid as="main" className="wm-bg">
         {isFetching && (
-          <Row>
-            <Col xs="2" offsetXs="6">
-              <Spinner size={48} />
-            </Col>
-          </Row>
+          <>
+            <Header isSticky />
+            <Container style={{ textAlign: 'center', minHeight: '600px' }} className="fr-pt-5w wm-font">
+              <div className="fr-mb-5w wm-message fr-pt-10w">
+                Loading data from OpenAlex, please wait...
+                <br />
+                <br />
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/OpenAlex_logo_2021.svg/320px-OpenAlex_logo_2021.svg.png" alt="OpenAlex" />
+                <br />
+                <span className="loader fr-my-5w">Loading</span>
+              </div>
+            </Container>
+          </>
         )}
 
         {error && (
           <Row gutters className="fr-mb-16w">
             <Col xs="12">
-              <div>
+              <Text>
                 Error while fetching data, please try again later or contact the
                 team (see footer).
-              </div>
+              </Text>
             </Col>
           </Row>
         )}
 
         {!isFetching && isFetched && (
           <Row>
-            {/* <Row className="wm-bg">
-              <Col md={9} offsetMd={2}>
-                <div className="wm-actions">
-                  <ExportErrorsButton
-                    allOpenalexCorrections={allOpenalexCorrections}
-                    options={options}
-                  />
-                  <SendFeedbackButton
-                    allOpenalexCorrections={allOpenalexCorrections}
-                  />
-                </div>
-              </Col>
-              <Col />
-            </Row> */}
             <Col md={2}>
               params:
-
             </Col>
             <Col md={10}>
               <OpenalexTab
-                affiliations={affiliations.filter(
-                  (affiliation) => affiliation.source === 'OpenAlex',
-                )}
+                affiliations={openAlexAffiliations}
                 allOpenalexCorrections={allOpenalexCorrections}
                 options={options}
                 setAllOpenalexCorrections={setAllOpenalexCorrections}

diff --git a/client/src/styles/index.scss b/client/src/styles/index.scss
@@ -37,10 +37,8 @@
 
 
 /* General */
-
-body {
-  height: auto;
-  font-family: 'Courier New', Courier, monospace;
+html, body {
+  height: 100%;
 }
 
 .filters {
@@ -126,6 +124,20 @@ body {
 .wm-bg {
   background-color: #222;
 }
+.wm-message{
+  background-color: #eee;
+  padding: 15px;
+  border: 1px solid #000;
+  border-radius: 15px;
+  box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.3);
+}
+
+.wm-fit-content{
+  min-height: 100%; /* real browsers */
+  height: auto !important; /* real browsers */
+  height: 100%; 
+}
+
 .wm-menu{
   min-height: fit-content;
 .wm-text{
@@ -160,3 +172,47 @@ body {
     }
   }
 }
+
+.loader{
+        display: inline-block;
+        text-align: center;
+        line-height: 86px;
+        text-align: center;
+        position: relative;
+        padding: 0 48px;
+        font-size: 28px;
+        font-family: 'Courier New', Courier, monospace;
+        color: #222;
+        }
+        .loader:before, .loader:after {
+          content: "";
+          display: block;
+          width: 15px;
+          height: 15px;
+          background: currentColor;
+          position: absolute;
+          animation: load .7s infinite alternate ease-in-out;
+          top: 0;
+        }
+        .loader:after {
+          top: auto;
+          bottom: 0;
+        }
+      @keyframes load {
+        0% {
+          left: 0;
+          height: 43px;
+          width: 15px;
+          transform: translateX(0)
+        }
+        50% {
+          height: 10px;
+          width: 40px
+        }
+        100% {
+          left: 100%;
+          height: 43px;
+          width: 15px;
+          transform: translateX(-100%)
+        }
+      }