Update renderer

src/components/FrameRenderer/FrameRenderer.astro

@@ -17,13 +17,15 @@ const { resourceId, resourceType, jsonUrl, dimensions = null } = Astro.props;
 ---
 
 <div
-  id='resource-svg'
+  id='resource-svg-wrap'
   style={dimensions ? `--aspect-ratio:${dimensions.width}/${dimensions.height}` : null}
   data-resource-type={resourceType}
   data-resource-id={resourceId}
   data-json-url={jsonUrl}
 >
+  <div id='resource-loader'>
     <Loader />
   </div>
+</div>
 
 <script src='./renderer.js'></script>

src/components/FrameRenderer/renderer.js

@@ -5,8 +5,10 @@ export class Renderer {
     this.resourceId = '';
     this.resourceType = '';
     this.jsonUrl = '';
+    this.loaderNode = null;
 
-    this.containerId = 'resource-svg';
+    this.containerId = 'resource-svg-wrap';
+    this.loaderId = 'resource-loader';
 
     this.init = this.init.bind(this);
     this.onDOMLoaded = this.onDOMLoaded.bind(this);
@@ -15,6 +17,10 @@ export class Renderer {
     this.prepareConfig = this.prepareConfig.bind(this);
   }
 
+  get loaderEl() {
+    return document.getElementById(this.loaderId);
+  }
+
   get containerEl() {
     return document.getElementById(this.containerId);
   }
@@ -24,6 +30,8 @@ export class Renderer {
       return false;
     }
 
+    // Clone it so we can use it later
+    this.loaderNode = this.loaderEl.cloneNode();
     const dataset = this.containerEl.dataset;
 
     this.resourceType = dataset.resourceType;
@@ -43,14 +51,30 @@ export class Renderer {
       return null;
     }
 
+    this.containerEl.replaceChildren(this.loaderNode);
+
     return fetch(jsonUrl)
-      .then(function (res) {
+      .then((res) => {
         return res.json();
       })
-      .then(function (json) {
+      .then((json) => {
         return wireframeJSONToSVG(json, {
           fontURL: '/fonts/balsamiq.woff2',
         });
+      })
+      .then((svg) => {
+        this.containerEl.replaceChildren(svg);
+      })
+      .catch((error) => {
+        const message = `
+          <strong>There was an error.</strong><br>
+          
+          Try loading the page again. or submit an issue on GitHub with following:<br><br>
+
+          ${error.message} <br /> ${error.stack}
+        `;
+
+        this.containerEl.innerHTML = `<div class="error py-5 text-center text-red-600 mx-auto">${message}</div>`;
       });
   }
 
@@ -59,11 +83,7 @@ export class Renderer {
       return;
     }
 
-    this.jsonToSvg(this.jsonUrl)
-      .then((svg) => {
-        document.getElementById(this.containerId).replaceChildren(svg);
-      })
-      .catch(console.error);
+    this.jsonToSvg(this.jsonUrl);
   }
 
   handleSvgClick(e) {

src/data/roadmaps/frontend/frontend.md

@@ -10,7 +10,7 @@ hasTopics: true
 tnsBannerLink: "https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert"
 dimensions:
   width: 968
-  height: 2807.36
+  height: 2822.1
 schema:
   headline: "Frontend Developer Roadmap"
   description: "Learn how to become a Frontend Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place."