diff --git a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx
index b8c273af8..db39537ed 100644
--- a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx
+++ b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx
@@ -5,6 +5,7 @@ import { ReactDiagram } from 'gojs-react';
 import getSPSiteData from './helpers/SPSiteData';
 import { initDiagram } from './helpers/GoJSHelper';
 import getGoJSNodesFromSPSiteData from './helpers/SPSiteDataToGoJSER';
+import { ProgressIndicator } from 'office-ui-fabric-react';
 
 interface SpSiteDiagramState {
   loadingProgress: number,
@@ -33,14 +34,18 @@ export default class SpSiteErDiagram extends React.Component<ISpSiteErDiagramPro
   public render(): React.ReactElement<ISpSiteErDiagramProps> {
     return (
       <div className={styles.spSiteErDiagram} style={{height: "calc(100% - 0px)", padding: "0px"}}>
-        {this.state.loadingProgress != 100 || this.state.nodeDataArray.length == 0 ?
-        <div>Loading ({this.state.loadingProgress}%)</div> : 
+        { // this.state.loadingProgress != 100 || this.state.nodeDataArray.length == 0
+        this.state.loadingProgress != 100 || this.state.nodeDataArray.length == 0 ?
+        <div style={{ padding: "8%" }}>
+          <ProgressIndicator label={`Loading Lists and Columns ${this.state.loadingProgress.toFixed(0)}%`} percentComplete={this.state.loadingProgress/100} />
+        </div> : 
         <ReactDiagram //ref={diagramRef} 
           divClassName='diagram-component'
           style={{ backgroundColor: '#eee' }}
           initDiagram={initDiagram}
           nodeDataArray={this.state.nodeDataArray}
           linkDataArray={this.state.linkDataArray}
+
         />}
       </div>
     );
diff --git a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteData.ts b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteData.ts
index ab73ed111..bae1f2ca3 100644
--- a/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteData.ts
+++ b/samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteData.ts
@@ -60,7 +60,7 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
             progress && progress(loadedCount/totalCount * 100);
 
             // save names for later
-            tmp_listNames[`{${list.Id}}`] = list.Title;
+            tmp_listNames[`{${list.Id.toLocaleLowerCase()}}`] = list.Title;
 
             // Tables/Lists
             let table: SPTable = { title: list.Title, fields: [], alerts: [] };
@@ -102,7 +102,9 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
     }
 
     // resolve Ids
-    spSiteData.relations = spSiteData.relations.map<SPRelation>((r) => {return {...r, toTableTitle: tmp_listNames[r.toTableTitle]}})
+    console.log("tmp_listNames",tmp_listNames);
+    console.log("asd", [...spSiteData.relations]);
+    spSiteData.relations = spSiteData.relations.map<SPRelation>((r) => {return {...r, toTableTitle: tmp_listNames[r.toTableTitle.toLocaleLowerCase()]}})
 
     localStorage.setItem(storageKey, JSON.stringify(spSiteData));