added Loading animation in studio

asyncapi · Feb 21, 2024 · aa7a39e · aa7a39e
1 parent 2e0b921
commit aa7a39e
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/apps/studio/src/components/Navigation.tsx b/apps/studio/src/components/Navigation.tsx
@@ -252,6 +252,7 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
   className = '',
 }) => {
   const [hash, setHash] = useState(window.location.hash);
+  const [loading,setloading] = useState(false);
 
   const { navigationSvc } = useServices();
   const rawSpec = useFilesState(state => state.files['asyncapi']?.content);
@@ -269,11 +270,26 @@ export const Navigation: React.FunctionComponent<NavigationProps> = ({
       window.removeEventListener('hashchange', fn);
     };
   }, []);
+
+  useEffect(()=>{
+    if (!document){
+      setloading(true);
+      const timer = setTimeout(() => {
+        setloading(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  },[document])
 
   if (!rawSpec || !document) {
     return (
-      <div className="flex overflow-hidden bg-gray-800 h-full justify-center items-center text-center text-white text-md px-6">
-        Empty or invalid document. Please fix errors/define AsyncAPI document.
+      <div className="flex flex-1 overflow-hidden h-full justify-center items-center text-2xl mx-auto px-6 text-center" style={{ backgroundColor: "black" }}>
+        {loading ?(
+          <div className="rotating-wheel"></div>
+        ) : (
+          <p style={{ color: "white" }}>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+        )
+        }
       </div>
     );
   }

diff --git a/apps/studio/src/components/Template/HTMLWrapper.tsx b/apps/studio/src/components/Template/HTMLWrapper.tsx
@@ -12,6 +12,7 @@ export const HTMLWrapper: React.FunctionComponent<HTMLWrapperProps> = () => {
   const [parsedSpec, setParsedSpec] = useState<AsyncAPIDocumentInterface | null>(null);
   const { navigationSvc } = useServices();
   const document = useDocumentsState(state => state.documents['asyncapi']?.document) || null;
+  const[loading, setloading] = useState(false);
 
   const autoRendering = useSettingsState(state => state.templates.autoRendering);
   const templateRerender = useOtherState(state => state.templateRerender);
@@ -33,10 +34,24 @@ export const HTMLWrapper: React.FunctionComponent<HTMLWrapperProps> = () => {
     }
   }, [templateRerender]); // eslint-disable-line
 
+  useEffect(()=>{
+    if (!document){
+      setloading(true);
+      const timer = setTimeout(() => {
+        setloading(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  },[document])
   if (!document) {
     return (
       <div className="flex flex-1 overflow-hidden h-full justify-center items-center text-2xl mx-auto px-6 text-center">
-        <p>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+        {loading ?(
+          <div className="rotating-wheel"></div>
+        ) : (
+          <p>Empty or invalid document. Please fix errors/define AsyncAPI document.</p>
+        )
+        }
       </div>
     );
   }