diff --git a/src/components/XircuitsApp.ts b/src/components/XircuitsApp.ts
index ec361e3a..a4603479 100644
--- a/src/components/XircuitsApp.ts
+++ b/src/components/XircuitsApp.ts
@@ -47,7 +47,7 @@ export class XircuitsApplication {
                 return this.diagramEngine;
         }
 
-        public customDeserializeModel = (modelContext: any) => {
+        public customDeserializeModel = (modelContext: any, initialRender?: boolean) => {
 
                 if (modelContext == null) {
                         // When context empty, just return
@@ -92,7 +92,6 @@ export class XircuitsApplication {
                                 const sourceNode = tempModel.getNode(link.source);
                                 const targetNode = tempModel.getNode(link.target);
                                 const linkPoints = link.points;
-                                const points = [];
 
                                 const sourcePort = sourceNode.getPortFromID(link.sourcePort);
                                 const sourcePortName = sourcePort.getOptions()['name'];
@@ -103,7 +102,6 @@ export class XircuitsApplication {
                                                 newLink = newTriangleLink;
                                         }
                                 }
-                                newLink.setSourcePort(sourcePort);
 
                                 const targetPort = targetNode.getPortFromID(link.targetPort);
                                 const targetPortName = targetPort.getOptions()['name'];
@@ -114,14 +112,27 @@ export class XircuitsApplication {
                                                 newLink = newTriangleLink;
                                         }
                                 }
-                                newLink.setTargetPort(targetPort);
 
                                 // Set points on link if exist
+                                const points = [];
                                 linkPoints.map((point)=> {
                                         points.push(new PointModel({ id:point.id, link: link, position: new Point(point.x, point.y) }));
                                 })
-                                newLink.setPoints(points);
+
+                                newLink.setSourcePort(sourcePort);
+                                newLink.setTargetPort(targetPort);
                                 newLink.setSelected(link.selected);
+
+                                if (initialRender) {
+                                        // When initial rendering of xircuits, 
+                                        // delay the rendering of points.
+                                        setTimeout(() => {
+                                                newLink.setPoints(points);
+                                        }, 10)
+                                }
+                                else {
+                                        newLink.setPoints(points);
+                                }
                                 tempModel.addLink(newLink);
                         }
                 }
diff --git a/src/components/xircuitBodyWidget.tsx b/src/components/xircuitBodyWidget.tsx
index 791e318f..22bdc5c4 100644
--- a/src/components/xircuitBodyWidget.tsx
+++ b/src/components/xircuitBodyWidget.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
-import { DefaultLinkModel, LinkModel } from '@projectstorm/react-diagrams';
+import { LinkModel } from '@projectstorm/react-diagrams';
 import { NodeModel } from "@projectstorm/react-diagrams-core/src/entities/node/NodeModel";
 import { Dialog, showDialog, showErrorMessage } from '@jupyterlab/apputils';
 import { ILabShell, JupyterFrontEnd } from '@jupyterlab/application';
@@ -180,6 +180,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 	const [currentIndex, setCurrentIndex] = useState<number>(-1);
 	const [runType, setRunType] = useState<string>("run");
 	const [runTypesCfg, setRunTypesCfg] = useState<string>("");
+	const initialRender = useRef(true);
 	const xircuitLogger = new Log(app);
 	const contextRef = useRef(context);
 	const notInitialRender = useRef(false);
@@ -214,7 +215,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 			try {
 				if (notInitialRender.current) {
 					const model: any = currentContext.model.toJSON();
-					let deserializedModel = xircuitsApp.customDeserializeModel(model);
+					let deserializedModel = xircuitsApp.customDeserializeModel(model, initialRender.current);
 					deserializedModel.registerListener({
 						// Detect changes when node is dropped or deleted
 						nodesUpdated: () => {
@@ -254,6 +255,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 						}
 					})
 					xircuitsApp.getDiagramEngine().setModel(deserializedModel);
+					initialRender.current = false;
 				} else {
 					// Clear undo history when first time rendering
 					notInitialRender.current = true;