>>> continue

dist/styles/sass.css

@@ -1652,16 +1652,28 @@ i.how:hover span {
   font-weight: bold;
 }
 
+.phylo {
+  position: relative;
+}
+.phylo__spinner {
+  position: absolute;
+  font-size: 6px;
+  height: 100px;
+  width: 100px;
+  top: calc( 50% - 50px );
+  left: calc( 50% - 50px );
+}
+
 .phylo-topbar {
   display: flex;
 }
 .phylo-topbar__source {
-  width: 200px;
+  width: 304px;
   margin-right: 8px;
 }
 .phylo-topbar__autocomplete {
   display: flex;
-  width: 200px;
+  width: 304px;
   position: relative;
 }
 .phylo-topbar__suggestion {

src/Gargantext/Components/Bootstrap/Block/Spinner.purs

@@ -3,26 +3,25 @@ module Gargantext.Components.Bootstrap.Spinner(spinner) where
 import Gargantext.Prelude
 
 import Data.Foldable (intercalate)
+import Gargantext.Components.Bootstrap.Types (SpinnerTheme(..))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
 
 type Props   = ( | Options)
 type Options =
-  ( theme :: String
+  ( theme     :: SpinnerTheme
   , className :: String
   )
 
 options :: Record Options
 options =
-  { theme: "border"
-  , className: ""
+  { theme     : BorderTheme
+  , className : ""
   }
 
 -- | Structural Component for the Bootstrap spinner
 -- |
--- |    * theme: `"border" (default) | "grow"`
--- |
 -- | https://getbootstrap.com/docs/4.4/components/spinners/
 spinner :: forall r. R2.OptLeaf Options Props r
 spinner = R2.optLeaf component options
@@ -43,7 +42,7 @@ component = R.hooksComponent componentName cpt where
       -- BEM classNames
       , componentName
       -- Bootstrap specific classNames
-      , bootstrapName <> "-" <> props.theme
+      , bootstrapName <> "-" <> show props.theme
       ]
     -- Render
     pure $

src/Gargantext/Components/Bootstrap/Types.purs

 module Gargantext.Components.Bootstrap.Types
   ( ComponentStatus(..)
   , Sizing(..)
+  , SpinnerTheme(..)
   ) where
 
 import Gargantext.Prelude
@@ -64,3 +65,18 @@ instance Show Sizing where
   show SmallSize  = "sm"
   show MediumSize = "md"
   show LargeSize  = "lg"
+
+----------------------------------------------------------------------
+
+-- | Theme values used by Bootstrap Spinner
+-- |
+-- | https://getbootstrap.com/docs/4.4/components/spinners/
+data SpinnerTheme =
+    BorderTheme
+  | GrowTheme
+
+derive instance Generic SpinnerTheme _
+derive instance Eq SpinnerTheme
+instance Show SpinnerTheme where
+  show BorderTheme = "border"
+  show GrowTheme   = "grow"

src/sass/_phylo.scss

 @use "./abstract/_members" as *;
 
-$topbar-input-width: 200px;
+$topbar-input-width: 304px;
 
 /* fonts */
 
@@ -552,6 +552,26 @@ i.how:hover span {
 
 ////////////////////////////////////////////////////////////////
 
+.phylo {
+  position: relative;
+
+  &__spinner {
+    $size: 100px;
+    $weight: 6px;
+
+    position: absolute;
+    font-size: $weight;
+    height: $size;
+    width: $size;
+    // (?) `centered` mixin will not work here, due to Bootstrap process
+    //     interfering with the transform rule
+    top: calc( 50% - #{ $size / 2 } );
+    left: calc( 50% - #{ $size / 2 } );
+  }
+}
+
+////////////////////////////////////////////////////////////////
+
 .phylo-topbar {
   display: flex;