feat: added loading animation in output

modelina-website/src/components/contexts/PlaygroundContext.tsx

@@ -48,6 +48,8 @@ interface PlaygroundContextProps {
   setHasLoadedQuery: Dispatch<SetStateAction<boolean>>;
   renderModels: React.ReactNode | null;
   setRenderModels: (models: React.ReactNode) => void;
+  outputLoading: boolean;
+  setOutputLoading: Dispatch<SetStateAction<boolean>>;
 }
 
 const PlaygroundContext = createContext<PlaygroundContextProps | undefined>(undefined);
@@ -111,6 +113,7 @@ export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }>
   const [isLoaded, setIsLoaded] = useState(false);
   const [hasLoadedQuery, setHasLoadedQuery] = useState(false);
   const [renderModels, setRenderModels] = React.useState<React.ReactNode | null>(null);
+  const [outputLoading, setOutputLoading] = useState(false);
 
   const contextValue = useMemo(() => ({
     showOptions,
@@ -140,7 +143,9 @@ export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }>
     hasLoadedQuery,
     setHasLoadedQuery,
     renderModels,
-    setRenderModels
+    setRenderModels,
+    outputLoading,
+    setOutputLoading
   }), [
     showOptions,
     setShowOptions,
@@ -170,6 +175,8 @@ export const PlaygroundContextProvider: React.FC<{ children: React.ReactNode; }>
     setHasLoadedQuery,
     renderModels,
     setRenderModels,
+    outputLoading,
+    setOutputLoading
   ]);
 
   return (

modelina-website/src/components/playground/GeneratedModels.tsx

@@ -15,7 +15,7 @@ const GeneratedModelsComponent: React.FC<GeneratedModelsComponentProps> = ({
   const context = useContext(PlaygroundGeneratedContext);
   const [selectedModel, setSelectedModel] = useState<string>('');
   const { setRenderModels, generatorCode, showGeneratorCode, setShowGeneratorCode } = usePlaygroundContext();
-
+  const { outputLoading } = usePlaygroundContext();
   const toShow = () => {
     let selectedCode = '';
     let updatedSelectedModel = selectedModel;
@@ -75,6 +75,14 @@ const GeneratedModelsComponent: React.FC<GeneratedModelsComponentProps> = ({
     setRenderModels(modelsToRender);
   }, [updatedSelectedModel, showGeneratorCode]);
 
+  if (outputLoading) {
+    return (
+      <div className="h-full flex items-center justify-center bg-code-editor-dark transition-opacity">
+        <div className="text-white opacity-0">Loading...</div>
+      </div>
+    );
+  }
+
   if (showAllInOneFile === true) {
     return (
       <div className="h-full bg-code-editor-dark text-white rounded-b shadow-lg font-bold">

modelina-website/src/components/playground/Playground.tsx

@@ -45,6 +45,8 @@ const Playground: React.FC<ModelinaPlaygroundProps> = (props) => {
     setIsLoaded,
     hasLoadedQuery,
     setHasLoadedQuery,
+    outputLoading,
+    setOutputLoading
   } = usePlaygroundContext();
 
   // To avoid hydration error
@@ -263,17 +265,20 @@ const Playground: React.FC<ModelinaPlaygroundProps> = (props) => {
           setError(false);
           setStatusCode(200);
           setErrorMessage('');
+          setOutputLoading(false);
         }).catch(error => {
           console.error(error);
           setError(true);
           setErrorMessage("Input is not a correct AsyncAPI document, so it cannot be processed.");
+          setOutputLoading(true);
           setStatusCode(500);
         });
       }
     } catch (e: any) {
       console.error(e);
       setError(true);
       setErrorMessage("Input is not a correct AsyncAPI document, so it cannot be processed.");
+      setOutputLoading(true);
       setStatusCode(400);
     }
   };

modelina-website/src/components/playground/options/GeneralOptions.tsx

@@ -4,6 +4,7 @@ import { modelinaLanguageOptions } from '@/types';
 import { PlaygroundGeneralConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
 import Select from '../../Select';
+import { usePlaygroundContext } from '../../contexts/PlaygroundContext';
 
 interface GeneralOptionsProps {
   setNewConfig?: (queryKey: string, queryValue: any) => void;
@@ -13,32 +14,44 @@ interface GeneralOptionsState { }
 
 export const defaultState: GeneralOptionsState = {};
 
+
 const GeneralOptions: React.FC<GeneralOptionsProps> = ({ setNewConfig }) => {
   const context = useContext(PlaygroundGeneralConfigContext);
   const [state, setState] = useState<GeneralOptionsState>(defaultState);
 
+  const {
+    setOutputLoading
+  } = usePlaygroundContext();
+
+
   const onChangeLanguage = (language: any) => {
       setNewConfig?.('language', String(language));
+      setOutputLoading(true);
   };
 
   const onChangeShowTypeMappingExample = (event: React.ChangeEvent<HTMLInputElement>) => {
       setNewConfig?.('showTypeMappingExample', event.target.checked);
+      setOutputLoading(true);
   };
 
   const onChangeIndentationType = (value: any) => {
       setNewConfig?.('indentationType', String(value));
+      setOutputLoading(true);
   };
 
   const onChangePropertyNamingFormat = (value: any) => {
       setNewConfig?.('propertyNamingFormat', String(value));
+      setOutputLoading(true);
   };
 
   const onChangeModelNamingFormat = (value: any) => {
       setNewConfig?.('modelNamingFormat', String(value));
+      setOutputLoading(true);
   };
 
   const onChangeEnumKeyNamingFormat = (value: any) => {
       setNewConfig?.('enumKeyNamingFormat', String(value));
+      setOutputLoading(true);
   };
 
   return (

modelina-website/src/components/playground/options/TypeScriptGeneratorOptions.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useState } from 'react';
 import Select from '../../Select';
 import { PlaygroundTypeScriptConfigContext } from '@/components/contexts/PlaygroundConfigContext';
 import InfoModal from '@/components/InfoModal';
+import { usePlaygroundContext } from '../../contexts/PlaygroundContext';
 
 interface TypeScriptGeneratorOptionsProps {
   setNewConfig?: (queryKey: string, queryValue: any, updateCode?: boolean) => void;
@@ -14,35 +15,46 @@ export const defaultState: TypeScriptGeneratorState = {};
 const TypeScriptGeneratorOptions: React.FC<TypeScriptGeneratorOptionsProps> = ({ setNewConfig }) => {
   const context = useContext(PlaygroundTypeScriptConfigContext);
   const [state, setState] = useState<TypeScriptGeneratorState>(defaultState);
+  const {
+    setOutputLoading
+  } = usePlaygroundContext();
+
 
   const onChangeMarshalling = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNewConfig && setNewConfig('tsMarshalling', event.target.checked);
+    setOutputLoading(true);
   };
 
   const onChangeIncludeDescriptions = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNewConfig && setNewConfig('tsIncludeDescriptions', event.target.checked);
+    setOutputLoading(true);
   };
 
   const onChangeVariant = (variant: string) => {
     setNewConfig && setNewConfig('tsModelType', variant);
+    setOutputLoading(true);
   };
 
   const onChangeModuleSystem = (moduleSystem: string) => {
     setNewConfig && setNewConfig('tsModuleSystem', moduleSystem);
+    setOutputLoading(true);
   };
 
   const onChangeEnumType = (enumType: string) => {
     setNewConfig && setNewConfig('tsEnumType', enumType);
+    setOutputLoading(true);
   };
 
   const onChangeMapType = (mapType: string) => {
     setNewConfig && setNewConfig('tsMapType', mapType);
+    setOutputLoading(true);
   };
 
   const onChangeIncludeJsonBinPack = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (setNewConfig) {
       const shouldIncludeMarshalling = context?.tsMarshalling === false && event.target.checked === true;
       setNewConfig('tsIncludeJsonBinPack', event.target.checked, !shouldIncludeMarshalling);
+      setOutputLoading(true);
 
       if (shouldIncludeMarshalling) {
         setNewConfig('tsMarshalling', event.target.checked);
@@ -52,6 +64,7 @@ const TypeScriptGeneratorOptions: React.FC<TypeScriptGeneratorOptionsProps> = ({
 
   const onChangeIncludeExampleFunction = (event: React.ChangeEvent<HTMLInputElement>) => {
     setNewConfig && setNewConfig('tsIncludeExampleFunction', event.target.checked);
+    setOutputLoading(true);
   };
 
   return (