10.10.0.cl-preRender : format

Author: sastaachar

modules/ROOT/pages/prerender.adoc

@@ -6,12 +6,12 @@
 :page-pageid: prerender
 :page-description: How to use pre-rendering to optimize performance and user experience in ThoughtSpot embedding
 
-+== Load Flow Diagrams
-+
-+The following diagrams illustrate how ThoughtSpot embed components load in a typical application, both for normal and pre-rendered scenarios. Reviewing these will help set the context for the strategies described in this guide.
-+
-+image::./images/pre-render/embed_load.png[]
-+image::./images/pre-render/liveboardEmbed_load.png[]
+== Load Flow Diagrams
+
+The following diagrams illustrate how ThoughtSpot embed components load in a typical application, both for normal and pre-rendered scenarios. Reviewing these will help set the context for the strategies described in this guide.
+
+image::./images/pre-render/embed_load.png[]
+image::./images/pre-render/liveboardEmbed_load.png[]
 
 == How Embedding Normally Works (The Basics)
 
@@ -70,9 +70,9 @@ The value of `preRenderId` can be any string, but it must match the `preRenderId
 Limitation: Any props you want to pass to the embed (such as configuration options) must be passed to the `PreRenderedLiveboardEmbed` component on the home page. If you later render a `LiveboardEmbed` with the same `preRenderId`, those new props will not be respected if the iframe is already loaded. This is a current limitation of the pre-rendering approach.
 ====
 
-.React Example
-[source,jsx]
+[example]
 ----
+// React example
 import { LiveboardEmbed } from "@thoughtspot/visual-embed-sdk/react";
 
 const PreRenderLiveboardWithLiveboardId = () => (
@@ -109,9 +109,9 @@ Again, the value of `preRenderId` can be any string, but it must match the `preR
 Limitation: Any props you want to pass to the embed must be passed to the `PreRenderedLiveboardEmbed` component on the home page. If you later render a `LiveboardEmbed` with the same `preRenderId`, those new props will not be respected if the iframe is already loaded.
 ====
 
-.React Example
-[source,jsx]
+[example]
 ----
+// React example
 import { LiveboardEmbed } from "@thoughtspot/visual-embed-sdk/react";
 
 const PreRenderLiveboardWithoutLiveboardId = () => (
@@ -140,9 +140,9 @@ This strategy does not require special configuration—simply pass a `preRenderI
 <LiveboardEmbed preRenderId="pre-render-on-demand" className="embed-div" />
 ----
 
-.React Example
-[source,jsx]
+[example]
 ----
+// React example
 import { LiveboardEmbed } from "@thoughtspot/visual-embed-sdk/react";
 
 const PreRenderEmbedOnDemand = () => (
@@ -158,9 +158,9 @@ image::./images/pre-render/preRender_on_demand.png[]
 - On every visit, the iframe is recreated and the embed loads from scratch.
 - Efficient if the embed is rarely used, but slow for the user every time.
 
-.React Example
-[source,jsx]
+[example]
 ----
+// React example
 import { AppEmbed } from "@thoughtspot/visual-embed-sdk/react";
 
 const NormalEmbed = () => <AppEmbed className="embed-div" />;