[tree] don't render modal in tree, until it is requested by user

This improves performance of rendering for large trees.

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs

@@ -140,6 +140,12 @@ component = R.memo' $ R.hooksComponent componentName cpt where
       then showModal window selector modalEvents
       else hideModal window selector
 
+    -- | When box is true, show the modal immediately
+    R.useEffectOnce' $ do
+      if isVisible
+      then showModal window selector modalEvents
+      else hideModal window selector
+
     -- | Behaviors
     -- |
     let

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -31,6 +31,7 @@ import Gargantext.Components.Nodes.Corpus.Types (CorpusData)
 import Gargantext.Context.Progress (asyncContext, asyncProgress)
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Hooks.Loader (useLoader)
+import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
 import Gargantext.Hooks.Version (Version, useVersion)
 import Gargantext.Routes as Routes
 import Gargantext.Sessions (Session, sessionId)
@@ -100,6 +101,19 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
       folderOpen' <- R2.useLive' folderOpen
 
+      isBoxVisible' <- R2.useLive' isBoxVisible
+      isBoxVisiblePersist <- T.useBox isBoxVisible'
+      isBoxVisiblePersist' <- R2.useLive' isBoxVisiblePersist
+
+      -- | Modal not visible initially, but visible after first user
+      -- | click. This is to avoid modal loading initially
+      -- | (optimization for large trees), but persist it after user
+      -- | opens it.
+      useUpdateEffect1' isBoxVisible'
+        if isBoxVisible'
+           then T.write_ true isBoxVisiblePersist
+           else pure unit
+
       -- tasks' <- T.read tasks
 
     -- Computed
@@ -340,24 +354,25 @@ nodeSpanCpt = here.component "nodeSpan" cpt
 
           -- // Modals //
 
-            B.baseModal
-            { isVisibleBox: isBoxVisible
-            , noBody: true
-            , noHeader: true
-            , modalClassName: "forest-tree-node-modal"
-            }
-            [
-              nodePopupView
-              { boxes
-              , closeCallback: \_ -> T.write_ false isBoxVisible
-              , dispatch
-              , id
-              , name
-              , nodeType
-              , session
+            R2.when isBoxVisiblePersist' (
+              B.baseModal
+              { isVisibleBox: isBoxVisible
+              , noBody: true
+              , noHeader: true
+              , modalClassName: "forest-tree-node-modal"
               }
-            ]
-          ]
+              [
+                nodePopupView
+                { boxes
+                , closeCallback: \_ -> T.write_ false isBoxVisible
+                , dispatch
+                , id
+                , name
+                , nodeType
+                , session
+                }
+              ]
+            )
         ,
         -- // Mainleaf indicator of selected node //
         --
@@ -372,6 +387,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             { className: "mainleaf-selection-indicator" }
             []
         ]
+      ]
 
 
 ---------------------------------------------------------