fix: add loading state when no uri is given

components/Current/LivePreview/index.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import ContentstackLivePreview from "@contentstack/live-preview-utils";
-import { useEffect } from "react";
+import { useEffect } from "react"
+import ContentstackLivePreview from "@contentstack/live-preview-utils"
 
 export default function InitLivePreview() {
   useEffect(() => {
       if (!ContentstackLivePreview.livePreview) {
-        console.log("INIT");
-        ContentstackLivePreview.init();
+        ContentstackLivePreview.init()
       }
   }, []);
 

components/Current/LoadingPreview/index.tsx

@@ -0,0 +1,22 @@
+import styles from "./loading.module.css"
+
+export default function LoadingPreview() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.spinner}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  )
+}

components/Current/LoadingPreview/loading.module.css

@@ -0,0 +1,90 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}
+
+.spinner {
+  display: inline-block;
+  position: relative;
+  width:  80px;
+  height:  80px;
+}
+
+.spinner div {
+  transform-origin:  40px  40px;
+  animation: spinnerAnimation  1.2s linear infinite;
+}
+
+.spinner div::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top:  3px;
+  left:  37px;
+  width:  6px;
+  height:  18px;
+  border-radius:  20%;
+  background: red;
+}
+
+.spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+
+  .spinner div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
+  .spinner div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
+  .spinner div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
+  .spinner div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
+  .spinner div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
+  .spinner div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
+  .spinner div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
+  .spinner div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
+  .spinner div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
+  .spinner div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
+  }
+  .spinner div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+
+
+@keyframes spinnerAnimation {
+  0% {
+   opacity:  1;
+ }
+  100% {
+   opacity:  0;
+ }
+}