diff --git a/docs/index.css b/docs/index.css
index 6bf6e41..aa4b309 100644
--- a/docs/index.css
+++ b/docs/index.css
@@ -118,7 +118,11 @@ body:not(.download) #download {
   margin-bottom:2em;
 }
 
-.loader{
+body:not(.loading) #loader {
+  /* display:none; */
+  opacity:0.0;
+}
+#loader{
   border-radius:50%;
   width: 1em;
   height: 1em;
@@ -126,8 +130,9 @@ body:not(.download) #download {
   margin: 0 auto;
   position: relative;
   text-indent: -9999em;
-  color:white;
-  display:none;
+  color: white;
+  opacity:1.0;
+  transition: opacity 500ms;
 
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
@@ -140,26 +145,46 @@ body:not(.download) #download {
   animation-delay: -0.16s;
   animation-timing-function: ease-in-out;
 
-  --ld0: 0.00em 2.25em 0 0.20em rgba(127,127,127,1.50);
-  --ld1: 0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
-  --ld2: 1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
-  --ld3: 2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
-  --ld4: 2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
-  --ld5: 3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
-  --ld6: 2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
-  --ld7: 2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
-  --ld8: 1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
-  --ld9: 0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
-  --ld10: 0.00em 1.75em 0 0.00em rgba(127,127,127,-0.50);
-  --ld11: -0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
-  --ld12: -1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
-  --ld13: -2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
-  --ld14: -2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
-  --ld15: -3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
-  --ld16: -2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
-  --ld17: -2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
-  --ld18: -1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
-  --ld19: -0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
+  --ld0: 0.00em 2.25em 0 0.20em
+  rgba(127,127,127,1.50);
+  --ld1: 0.93em 2.24em 0 0.20em
+  rgba(127,127,127,1.45);
+  --ld2: 1.76em 2.20em 0 0.18em
+  rgba(127,127,127,1.31);
+  --ld3: 2.43em 2.15em 0 0.16em
+  rgba(127,127,127,1.09);
+  --ld4: 2.85em 2.08em 0 0.13em
+  rgba(127,127,127,0.81);
+  --ld5: 3.00em 2.00em 0 0.10em
+  rgba(127,127,127,0.50);
+  --ld6: 2.85em 1.92em 0 0.07em
+  rgba(127,127,127,0.19);
+  --ld7: 2.43em 1.85em 0 0.04em
+  rgba(127,127,127,-0.09);
+  --ld8: 1.76em 1.80em 0 0.02em
+  rgba(127,127,127,-0.31);
+  --ld9: 0.93em 1.76em 0 0.00em
+  rgba(127,127,127,-0.45);
+  --ld10: 0.00em 1.75em 0 0.00em
+  rgba(127,127,127,-0.50);
+  --ld11: -0.93em 1.76em 0 0.00em
+  rgba(127,127,127,-0.45);
+  --ld12: -1.76em 1.80em 0 0.02em
+  rgba(127,127,127,-0.31);
+  --ld13: -2.43em 1.85em 0 0.04em
+  rgba(127,127,127,-0.09);
+  --ld14: -2.85em 1.92em 0 0.07em
+  rgba(127,127,127,0.19);
+  --ld15: -3.00em 2.00em 0 0.10em
+  rgba(127,127,127,0.50);
+  --ld16: -2.85em 2.08em 0 0.13em
+  rgba(127,127,127,0.81);
+  --ld17: -2.43em 2.15em 0 0.16em
+  rgba(127,127,127,1.09);
+  --ld18: -1.76em 2.20em 0 0.18em
+  rgba(127,127,127,1.31);
+  --ld19: -0.93em 2.24em 0 0.20em
+  rgba(127,127,127,1.45);
 }
 
 
diff --git a/docs/index.js b/docs/index.js
index 687806a..7104349 100644
--- a/docs/index.js
+++ b/docs/index.js
@@ -16,6 +16,8 @@
     document.body.classList.remove("toasting")
   }
   
+  const isIframed = window.self !== window.top;
+        
   function addToast() {
     // `<div id="toast">
     // itty.bitty is experimental technology that renders linked content from outside sources.
@@ -25,11 +27,26 @@
     // </div>`
   }
     
-  function addLoader() {
-    let el = document.createElement("div");
-    el.className = "loader";
-    document.body.appendChild(el);
+  function showLoader(state) {
+    let loader = document.getElementById("loader");
+
+    if (state) {
+      if (!loader) {
+        loader = document.createElement("div");
+        loader.id = "loader";
+        document.body.appendChild(loader);
+      }
+
+      setTimeout(() => document.body.classList.toggle("loading", true), 1)
+      
+    } else {
+      document.body.classList.toggle("loading", false)
+      if (loader) {
+        setTimeout(() => loader?.parentElement.removeChild(loader), 500)
+      }
+    }
   }
+  window.showLoader = showLoader;
 
   function setThemeColor(color) {
     let el = document.getElementById("themeColor");
@@ -145,7 +162,8 @@
       if (e.data.getStorage) document.getElementById("iframe").postMessage(document.localStorage.getItem(contentHash), e.origin)
   }, false);  
   
-  async function renderContent() {    
+  async function renderContent() {
+    showLoader(true)    
     var fragment = window.location.hash.substring(1);
 
     if (window.location.search) { // Redirect search to path (coming out of server opengraph forwarding)
@@ -295,9 +313,11 @@
       } catch (e) {
         console.log("DL error", e)
         iframe.src = dataURL;
+        showLoader(false)   
       }
     } else if (renderMode == "data") {
       iframe.src = dataURL;
+      showLoader(false)   
     } else {
       bitty.dataToString(dataURL, function(content) {
         if (renderMode == "frame") {
@@ -308,14 +328,13 @@
       });
     }
     
-    
     let recordHistory = true
-    if (recordHistory) recordToHistory(durl);
+    if (!isIframed && recordHistory) recordToHistory(durl);
 
   };
 
-  window.addEventListener('load',renderContent);
-  // window.addEventListener('hashchange',renderContent);
+  window.addEventListener('DOMContentLoaded',renderContent);
+  window.addEventListener('hashchange',renderContent);
 
   
   const SCRIPT_LOADER = `<!doctype html><meta charset=utf-8><script src="${location.origin}/render.js"></script>`
@@ -340,6 +359,7 @@
         iframe.contentWindow.postMessage(params, "*");
         delete iframe.onload
         iframe.contentWindow.focus();
+        showLoader(false)
       });
       // writeDocContent(iframe.contentWindow.document, SCRIPT_LOADER)
       // iframe.srcdoc = SCRIPT_LOADER;
@@ -393,9 +413,11 @@ async function recordToHistory() {
     for (let el of dom.getElementsByTagName('script')) { el.parentNode.removeChild(el) }
 
     metadata.title = dom.title;
-    metadata.description = dom.body.innerText.trim();
-    if (!metadata.title.length) metadata.title = dom.title = (dom.body.children[0].innerText.trim()).split("\n").pop();
-    metadata.description = metadata.description.replace(metadata.title, "").trim();
+    metadata.description = dom.body?.innerText.trim();
+    if (!metadata.title.length) {
+      metadata.title = (dom.body?.children[0]?.innerText.trim())?.split("\n").pop();
+    }
+    metadata.description = metadata.description?.replace(metadata.title, "").trim();
     
 
     
@@ -408,9 +430,9 @@ async function recordToHistory() {
   if (navigator.storage && navigator.storage.persist)
     navigator.storage.persist().then(granted => {
     if (granted)
-      console.log("Storage will not be cleared except by explicit user action");
+      console.debug("Storage will not be cleared except by explicit user action");
     else
-      console.log("Storage may be cleared by the UA under storage pressure.");
+      console.debug("Storage may be cleared by the UA under storage pressure.");
   });
 
   let openRequest = indexedDB.open("history", 3);