Merge pull request #23 from Looky1173/content-browser-loading-indicator

Added loading and error messages to the content browser

Author: twpol

assets/content-explorer.js

@@ -4,7 +4,13 @@
 const listContainer = document.getElementById('list-container');
 const COMPENSATION_TEXTS = { free: 'Download (free)', donation: 'Download (donation-ware)', commercial: 'Buy (commercial)' };
 
-const _routes = await fetch('https://static.openrails.org/content/routes.json');
+const _routes = await fetch('https://static.openrails.org/content/routes.json').catch((e) => {
+	listContainer.innerHTML = `
+        <div style="text-align: center; color: red;">
+            <strong>Sorry, there was an error while loading content.</strong>
+            <p>${e}</p>
+        </div>`;
+});
 const routes = (await _routes.json()).map((item, index) => ({ index, ...item }));
 
 let selectedCard = 'routes';

download/explore-content/index.html

@@ -7,18 +7,12 @@
 
 <div class="content-explorer-container">
 	<div class="row">
+		<p>This catalogue lists free and pay routes from all over the world. Use the search and filter options to find ones that suit your interests.</p>
 		<p>
-			This catalogue lists free and pay routes from all over the world. 
-			Use the search and filter options to find ones that suit your interests.
-		</p>
-		<p>
-			Note that these routes are currently limited to those that a self-contained and require no other files.
-			This makes them easy to install<!-- and Open Rails includes an Install Content button to download and install a route for you. -->.
+			Note that these routes are currently limited to those that a self-contained and require no other files. This makes them easy to install<!-- and Open Rails includes an Install Content button to download and install a route for you. -->.
 			We plan to extend this catalogue to include other routes, Train Cars and Trains.
 		</p>
-		<p>
-			If you wish to add an entry to the catalogue, then send a message using <a href="/contact/form.html">our contact form</a>.
-		</p>
+		<p>If you wish to add an entry to the catalogue, then send a message using <a href="/contact/form.html">our contact form</a>.</p>
 	</div>
 	<div class="selection-container">
 		<div class="selection selected" data-card="routes" style="--image: url(https://d3i6fh83elv35t.cloudfront.net/static/2022/06/GettyImages-915441550-1024x683.jpg)">
@@ -28,7 +22,9 @@
 		<div
 			class="selection"
 			data-card="train-cars"
-			style="--image: url(https://www.nps.gov/subjects/steamtownlocomotivesexhibit/images/Boston-Maine-Railroad-locomotive-number-3713-cms.jpg)" disabled="true">
+			style="--image: url(https://www.nps.gov/subjects/steamtownlocomotivesexhibit/images/Boston-Maine-Railroad-locomotive-number-3713-cms.jpg)"
+			disabled="true"
+		>
 			<div class="gradient"></div>
 			<div class="selection-inside">Train cars</div>
 		</div>
@@ -45,7 +41,9 @@
 			<button class="filter-btn" data-type="free" data-secondary>Free</button>
 		</div>
 	</div>
-	<div id="list-container"></div>
+	<div id="list-container">
+		<em style="text-align: center">Please wait, loading content...</em>
+	</div>
 </div>
 
 <script src="{{ '/assets/content-explorer.js' | relative_url }}" type="module"></script>