CSS fiddles

Author: MaddyGuthridge

src/app.html

@@ -5,6 +5,7 @@
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel= "stylesheet" href= "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" >
 	%sveltekit.head%
 </head>
 
@@ -15,7 +16,8 @@
 		html, body {
 			margin: 0;
 			padding: 0;
-			min-height: 100vh;
+			height: 100vh;
+			overflow: hidden;
 		}
 	</style>
 </body>

src/lib/index.ts

@@ -4,23 +4,26 @@ import { loadPyodide, type PyodideInterface } from 'pyodide';
 /**
  * Set up Pyodide and install pyhtml-enhanced.
  */
-async function pyodideInit() {
+async function pyodideInit(onStatusUpdate: (status: string) => void) {
+  onStatusUpdate("Loading pyodide...");
   const pyodide = await loadPyodide();
+  onStatusUpdate("Loading micropip...");
   await pyodide.loadPackage("micropip");
   const micropip = pyodide.pyimport("micropip");
+  onStatusUpdate("micropip install pyhtml-enhanced");
   await micropip.install('pyhtml-enhanced');
   return pyodide;
 }
 
 let pyodide: PyodideInterface;
 
-export async function getPyodide() {
+export async function getPyodide(onStatusUpdate: (status: string) => void) {
   if (pyodide) return pyodide;
-  pyodide = await pyodideInit();
+  pyodide = await pyodideInit(onStatusUpdate);
   return pyodide;
 }
 
 export async function evalPyHTML(pyhtml: string): Promise<string> {
-  const pyodide = await getPyodide();
+  const pyodide = await getPyodide(() => { });
   return pyodide.runPython(pyhtml) as string;
 }

src/routes/+page.svelte

@@ -27,8 +27,14 @@ p.html(
 
   let pyodideReady = $state(false);
 
+  let pyodideStatus = $state('Please wait...');
+
+  function pyodideStatusUpdate(status: string) {
+    pyodideStatus = status;
+  }
+
   onMount(async () => {
-    await getPyodide();
+    await getPyodide(pyodideStatusUpdate);
     console.log('Pyodide is ready');
     renderHtml();
     pyodideReady = true;
@@ -37,7 +43,6 @@ p.html(
 
 <h1>Try out PyHTML</h1>
 {#if pyodideReady}
-  <p class="status">Pyodide loaded successfully!</p>
   <main>
     <div class="editor">
       <h2>Write some code</h2>
@@ -59,7 +64,12 @@ p.html(
     </div>
   </main>
 {:else}
-  <p class="status">Pyodide is loading...</p>
+<div class="status-outer">
+  <div class="status-inner">
+    <i class="las la-sync spin"></i>
+    <p class="status-text">{pyodideStatus}</p>
+  </div>
+</div>
 {/if}
 
 <style>
@@ -68,28 +78,64 @@ p.html(
   }
 
   h1 {
-    text-align: center;
+    margin: 0px;
+    padding: 10px;
   }
-
-  .status {
+  h1,
+  h2 {
     text-align: center;
   }
 
-  main {
-    display: grid;
-    grid-template-areas:
-      'editor preview'
-      'editor html';
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-
+  /* Status message when loading */
+  .status-outer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .status-inner {
+    min-width: 300px;
+    display: flex;
+    gap: 10px;
+  }
+  .status-text {
     width: 100%;
-    min-height: 100%;
+  }
+  .spin {
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: rotating 2s linear infinite;
+  }
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Responsive design */
+  @media only screen and (min-width: 1000px) {
+    main {
+      display: grid;
+      grid-template-areas:
+        'editor preview'
+        'editor html';
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .editor {
     grid-area: editor;
     height: 100%;
+    width: 100%;
+    overflow: scroll;
   }
 
   .preview {
@@ -104,5 +150,10 @@ p.html(
   .html {
     grid-area: html;
     height: 100%;
+    width: 100%;
+  }
+
+  .html pre {
+    overflow: scroll;
   }
 </style>