[docs] echarts class for spinner

This prevents flickering of docs table when moving docs to/from trash
and updating the chart.

dist/styles/bootstrap-darkster.css

@@ -6220,6 +6220,10 @@ h3 {
   background-image: radial-gradient(circle, #000000 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-default.css

@@ -6173,6 +6173,10 @@ h3 {
   background-image: radial-gradient(circle, #343a40 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-greyson.css

@@ -5929,6 +5929,10 @@ h3 {
   background-image: radial-gradient(circle, #1e2b37 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-herbie.css

@@ -6177,6 +6177,10 @@ h3 {
   background-image: radial-gradient(circle, #072247 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

dist/styles/bootstrap-monotony.css

@@ -6178,6 +6178,10 @@ h3 {
   background-image: radial-gradient(circle, #111111 10%, transparent 10%);
 }
 
+.echarts-for-react {
+  height: 300px;
+}
+
 html {
   box-sizing: border-box;
   height: 100%;

src/Gargantext/Components/DocsTable.purs

@@ -437,6 +437,7 @@ pageLayoutCpt = here.component "pageLayout" cpt where
           , mkRequest
           , path
           , renderer: paint
+          , spinnerClass: Nothing
           }
       NT.CacheOff -> do
         localCategories <- T.useBox (Map.empty :: LocalUserScore)

src/Gargantext/Components/LoadingSpinner.purs

 module Gargantext.Components.LoadingSpinner where
 
+import Data.Maybe (Maybe(..), fromMaybe)
 import Reactix as R
 import Reactix.DOM.HTML as H
 
@@ -10,7 +11,9 @@ import Gargantext.Utils.Reactix as R2
 here :: R2.Here
 here = R2.here "Gargantext.Components.LoadingSpinner"
 
-type Props = ()
+type Props =
+  ( additionalClass :: Maybe String  -- addtional classes for styling the spinner
+  )
 
 loadingSpinner :: Record Props -> R.Element
 loadingSpinner props = R.createElement loadingSpinnerCpt props []
@@ -22,5 +25,7 @@ loadingSpinnerCpt = here.component "LoadingSpinner" cpt
     -- cpt _ _ = H.i {className: "fa fa-globe fa-spin fa-3x fa-fw"} [H.text ""]
 
     -- cpt _ _ = H.i {className: "fa fa-circle-o-notch fa-spin fa-3x fa-fw"} [H.text ""]
-    cpt _ _ = do
-      pure $ H.i {className: "fa fa-spinner fa-pulse fa-3x fa-fw"} [H.text ""]
+    cpt { additionalClass } _ = do
+      pure $ H.i { className: "fa fa-spinner fa-pulse fa-3x fa-fw " <> c } [H.text ""]
+      where
+        c = fromMaybe "" additionalClass

src/Gargantext/Components/NgramsTable.purs

@@ -605,6 +605,7 @@ mainNgramsTableCacheOnCpt = here.component "mainNgramsTableCacheOn" cpt where
       , mkRequest
       , path: path'
       , renderer: render
+      , spinnerClass: Nothing
       }
   versionEndpoint { defaultListId, path: { nodeId, tabType, session } } _ = get session $ R.GetNgramsTableVersion { listId: defaultListId, tabType } (Just nodeId)
   errorHandler = logRESTError here "[mainNgramsTable]"

src/Gargantext/Components/NgramsTable/Loader.purs

@@ -32,13 +32,20 @@ type LoaderWithCacheAPIProps path res ret = (
   , mkRequest      :: path -> GUC.Request
   , path           :: path
   , renderer       :: ret -> R.Element
+  , spinnerClass   :: Maybe String
   )
 
 
 useLoaderWithCacheAPI :: forall path res ret. Eq path => JSON.ReadForeign res => Eq ret =>
                          Record (LoaderWithCacheAPIProps path res ret)
                       -> R.Hooks R.Element
-useLoaderWithCacheAPI { cacheEndpoint, errorHandler, handleResponse, mkRequest, path, renderer } = do
+useLoaderWithCacheAPI { cacheEndpoint
+                      , errorHandler
+                      , handleResponse
+                      , mkRequest
+                      , path
+                      , renderer
+                      , spinnerClass } = do
   state <- T.useBox Nothing
   state' <- T.useLive T.unequal state
 
@@ -48,7 +55,7 @@ useLoaderWithCacheAPI { cacheEndpoint, errorHandler, handleResponse, mkRequest,
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer state'
+  pure $ maybe (loadingSpinner { additionalClass: spinnerClass }) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
     cacheEndpoint  :: path -> AffRESTError Version

src/Gargantext/Components/Nodes/Corpus/Chart/Common.purs

@@ -3,6 +3,7 @@ module Gargantext.Components.Nodes.Corpus.Chart.Common where
 import Gargantext.Prelude
 
 import Data.Array as A
+import Data.Maybe (Maybe(..))
 import Data.Tuple.Nested ((/\))
 import Gargantext.Components.Nodes.Corpus.Chart.Types (MetricsProps, ReloadPath)
 import Gargantext.Config.REST (AffRESTError)
@@ -86,4 +87,5 @@ metricsWithCacheLoadViewCpt = here.component "metricsWithCacheLoadView" cpt
                             , handleResponse
                             , mkRequest
                             , path: (reload' /\ path)
-                            , renderer: loaded { boxes, path, reload, session, onClick, onInit } }
+                            , renderer: loaded { boxes, path, reload, session, onClick, onInit }
+                            , spinnerClass: Just "echarts-for-react-spinner" }

src/Gargantext/Hooks/Loader.purs

@@ -62,7 +62,7 @@ loaderCpt = here.component "loader" cpt
     cpt { render, state } _ = do
       state' <- T.useLive T.unequal state
 
-      pure $ maybe (loadingSpinner {}) render state'
+      pure $ maybe (loadingSpinner { additionalClass: Nothing }) render state'
 
 type UseLoaderEffect path state =
   ( errorHandler :: RESTError -> Effect Unit
@@ -142,6 +142,7 @@ type LoaderWithCacheAPIProps path res ret =
   , mkRequest      :: path -> GUC.Request
   , path           :: path
   , renderer       :: ret -> R.Element
+  , spinnerClass   :: Maybe String
   )
 
 useLoaderWithCacheAPI :: forall path res ret.
@@ -153,7 +154,8 @@ useLoaderWithCacheAPI { boxes
                       , handleResponse
                       , mkRequest
                       , path
-                      , renderer } = do
+                      , renderer
+                      , spinnerClass } = do
   state <- T.useBox Nothing
   state' <- T.useLive T.unequal state
 
@@ -163,7 +165,7 @@ useLoaderWithCacheAPI { boxes
                            , mkRequest
                            , path
                            , state }
-  pure $ maybe (loadingSpinner {}) renderer state'
+  pure $ maybe (loadingSpinner { additionalClass: spinnerClass }) renderer state'
 
 type LoaderWithCacheAPIEffectProps path res ret = (
     boxes          :: Boxes

src/sass/_components.sass

 @import "./components/_grouped.scss"
+@import "./components/_loading_spinner.scss"

src/sass/components/_loading_spinner.scss

+.echarts-for-react {
+    height: 300px;
+}