front: editor - tooltip and loader on map popup while select

Close #5591
OpenRailAssociation · Nov 22, 2023 · 87fbf8c · 87fbf8c
1 parent b6b7dcf
commit 87fbf8c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/front/src/applications/editor/components/EntitySumUp.tsx b/front/src/applications/editor/components/EntitySumUp.tsx
@@ -6,7 +6,7 @@ import { Dispatch } from 'redux';
 import { TFunction } from 'i18next';
 import cx from 'classnames';
 
-import { Spinner } from 'common/Loader';
+import { LoaderFill } from 'common/Loader';
 import {
   BufferStopEntity,
   CatenaryEntity,
@@ -330,7 +330,7 @@ const EntitySumUp: FC<
     }
   }, [entity, id, objType, infraID, state.type]);
 
-  if (state.type === 'loading' || state.type === 'idle') return <Spinner />;
+  if (state.type === 'loading' || state.type === 'idle') return <LoaderFill displayDelay={500} />;
 
   if (state.type === 'error')
     return (

diff --git a/front/src/applications/editor/tools/selection/components.tsx b/front/src/applications/editor/tools/selection/components.tsx
@@ -71,7 +71,7 @@ export const SelectionLayers: FC = () => {
       <SelectionZone newZone={selectionZone} />
       {state.mousePosition && state.selectionState.type === 'single' && state.hovered && (
         <Popup
-          className="popup"
+          className="popup editor-selection"
           anchor="bottom"
           longitude={state.mousePosition[0]}
           latitude={state.mousePosition[1]}

diff --git a/front/src/applications/editor/tools/selection/styles.scss b/front/src/applications/editor/tools/selection/styles.scss
@@ -3,3 +3,10 @@
     font-weight: bold;
   }
 }
+
+.popup.editor-selection {
+  .maplibregl-popup-content {
+    min-width: 200px;
+    min-height: 100px;
+  }
+}
diff --git a/front/src/common/Loader.tsx b/front/src/common/Loader.tsx
@@ -1,25 +1,47 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import cx from 'classnames';
 
 import './Loader.scss';
 import { getIsLoading } from 'reducers/main/mainSelector';
 
+type SpinnerProps = HTMLAttributes<HTMLDivElement> & { displayDelay?: number };
+
+export const Spinner: FC<SpinnerProps> = ({ displayDelay, ...props }) => {
+  const [display, setDisplay] = useState(false);
+  const timeoutRef = useRef<null | number>(null);
+
+  useEffect(() => {
+    if (displayDelay) {
+      setDisplay(false);
+      timeoutRef.current = window.setTimeout(() => setDisplay(true), displayDelay);
+    } else setDisplay(true);
+
+    return () => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+    };
+  }, [displayDelay, timeoutRef]);
+
+  return display ? (
+    <div {...props}>
+      <div className="spinner-border" role="status">
+        <span className="sr-only">Loading...</span>
+      </div>
+    </div>
+  ) : null;
+};
+
+export const LoaderFill: FC<SpinnerProps> = ({ className, ...props }) => (
+  <Spinner {...props} className={cx(`loader-fill inset-0`, className)} />
+);
+
 type LoaderProps = {
   msg?: string;
   position?: 'center' | 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
   childClass?: string;
   className?: string;
 };
 
-export const Spinner: FC<HTMLAttributes<HTMLDivElement>> = (props) => (
-  <div {...props}>
-    <div className="spinner-border" role="status">
-      <span className="sr-only">Loading...</span>
-    </div>
-  </div>
-);
-
 const LoaderSNCF: FC<LoaderProps> = ({
   msg = '',
   position = 'center',
@@ -32,10 +54,6 @@ const LoaderSNCF: FC<LoaderProps> = ({
   </div>
 );
 
-export const LoaderFill: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
-  <Spinner {...props} className={cx(`loader-fill inset-0`, className)} />
-);
-
 export const LoaderState: FC<unknown> = () => {
   const isLoading = useSelector(getIsLoading);
   return isLoading ? <LoaderSNCF position="top-right" /> : null;