fix: Disable the generators that are not yet supported in V3

apps/studio/src/components/Modals/Generator/GeneratorModal.tsx

@@ -12,13 +12,25 @@
 
 import templates from './template-parameters.json';
 
 export const GeneratorModal = create(() => {
   const modal = useModal();
   const [template, setTemplate] = useState('');
   const { serverAPISvc } = useServices();
+  const [warning, setwarning] = useState(false);
   const [problem, setProblem] = useState<ServerAPIProblem & { validationErrors: any[] } | null>(null);
   const [confirmDisabled, setConfirmDisabled] = useState(true);
   const templateParamsRef = useRef<TemplateParametersHandle>(null);
+  const generatable = ['@asyncapi/dotnet-nats-template',
+  '@asyncapi/go-watermill-template',
+  '@asyncapi/html-template',
+  '@asyncapi/java-spring-cloud-stream-template',
+  '@asyncapi/java-spring-template',
+  '@asyncapi/java-template',
+  '@asyncapi/markdown-template',
+  '@asyncapi/nodejs-template',
+  '@asyncapi/nodejs-ws-template',
+  '@asyncapi/python-paho-template',
+  '@asyncapi/ts-nats-template']
 
   useEffect(() => {
     const required = template ? (templates as Record<string, any>)[String(template)].schema.required : [];
@@ -82,6 +94,9 @@
       onCancel={onCancel}
       closeAfterSumbit={false}
     >
+      {warning && (
+        <h3 className='block text-bold text-red-400'>Sorry! This project is under development</h3> 
+      )}
       <div>
         <div className="flex flex-row content-center justify-between text-sm">
           <label
@@ -94,7 +109,12 @@
             name="generate"
             className="shadow-sm focus:ring-pink-500 focus:border-pink-500 w-1/2 block sm:text-sm rounded-md py-1 text-gray-700 border-pink-300 border-2"
             onChange={e => {
-              setTemplate(e.target.value);
+              if (!generatable.includes(e.target.value)){
+                setTemplate(e.target.value);
+              }else{
+                setTemplate(e.target.value);
+                setwarning(true);
+              }
             }}
             value={template}
           >

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>
     );
   }

apps/studio/src/components/Template/HTMLWrapper.tsx

@@ -12,7 +12,6 @@ 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 autoRendering = useSettingsState(state => state.templates.autoRendering);
   const templateRerender = useOtherState(state => state.templateRerender);