From 599d8d12080ef2729639c6618d697d022ffef0df Mon Sep 17 00:00:00 2001
From: CyrilFerlicot <cyril@ferlicot.me>
Date: Thu, 7 Jul 2022 14:54:25 +0200
Subject: [PATCH] Update way to show a fetching data message to customize it
 more easily

---
 .../CYSFileLibrary.class.st                   |  9 +++-
 .../TLCytoscapeComponent.class.st             | 42 ++++++++++++-------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st b/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st
index 38697c7..1e574bf 100644
--- a/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st
+++ b/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st
@@ -2351,11 +2351,16 @@ CYSFileLibrary >> telescopeCss [
     z-index: 100000 !important;
 }
 
-.visualization.fetching::after {
-    content: "fetching";
+.visualization #fetching {
+    display: none;
     position: absolute;
     bottom: 0px;
     right: 0px;
+    z-index: 10;
+}
+
+.visualization.fetching #fetching {
+    display: block
 }
 
 .visualization.no-result::after {
diff --git a/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st b/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st
index 6fc6769..b91ff89 100644
--- a/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st
+++ b/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st
@@ -126,29 +126,41 @@ TLCytoscapeComponent >> panzoom: anObject [
 
 { #category : #rendering }
 TLCytoscapeComponent >> renderContentOn: html [
+
 	| visuId div callback |
 	visuId := self visuDivId.
 	div := html div
-		id: visuId;
-		style: self style;
-		attributeAt: #isTelescopeVisu put: 'true';
-		attributeAt: #'data-port' put: self webSocketPort;
-		attributeAt: #'data-panzoom' put: self panzoom asString;
-		class: 'telescopeVisu';
-		with: [ html div
-				class: 'visualization';
-				style: 'height: 100%; width: 100%;'.
-			self waitingMessage value: html.
-			self renderOptionalButtonsOn: html ];
-		yourself.
+		       id: visuId;
+		       style: self style;
+		       attributeAt: #isTelescopeVisu put: 'true';
+		       attributeAt: #'data-port' put: self webSocketPort;
+		       attributeAt: #'data-panzoom' put: self panzoom asString;
+		       class: 'telescopeVisu';
+		       with: [ 
+			       html div
+				       class: 'visualization';
+				       style: 'height: 100%; width: 100%;';
+				       with: [ 
+					       html div
+						       id: #fetching;
+						       with: [ self renderFetchingDivOn: html ] ].
+			       self waitingMessage value: html.
+			       self renderOptionalButtonsOn: html ];
+		       yourself.
 	callback := WAValueCallback new.
 	TLCytoscapeWebSocketDelegate
 		registerVisualization: self visualization
 		underId: visuId
 		withCallBack: callback
-		callbackUrl:
-			{html actionUrl asString.
-			(div storeCallback: callback)}
+		callbackUrl: { 
+				html actionUrl asString.
+				(div storeCallback: callback) }
+]
+
+{ #category : #rendering }
+TLCytoscapeComponent >> renderFetchingDivOn: html [
+
+	html text: 'Fetching'
 ]
 
 { #category : #rendering }