diff --git a/examples/integrate-with-react/package-lock.json b/examples/integrate-with-react/package-lock.json
index 6e3cec2138..f4c5a14bf3 100644
--- a/examples/integrate-with-react/package-lock.json
+++ b/examples/integrate-with-react/package-lock.json
@@ -7295,9 +7295,9 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -7318,7 +7318,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -7333,6 +7333,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/array-flatten": {
@@ -11464,9 +11468,9 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -21146,9 +21150,9 @@
       }
     },
     "express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -21169,7 +21173,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -24187,9 +24191,9 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ=="
     },
     "path-type": {
       "version": "4.0.0",
diff --git a/modelina-website/src/components/contexts/PlaygroundContext.tsx b/modelina-website/src/components/contexts/PlaygroundContext.tsx
index 7d646877cc..893aa6261f 100644
--- a/modelina-website/src/components/contexts/PlaygroundContext.tsx
+++ b/modelina-website/src/components/contexts/PlaygroundContext.tsx
@@ -41,6 +41,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);
@@ -104,6 +106,7 @@ export const PlaygroundContextProvider: React.FC<{
   const [isLoaded, setIsLoaded] = useState(false);
   const [hasLoadedQuery, setHasLoadedQuery] = useState(false);
   const [renderModels, setRenderModels] = React.useState<React.ReactNode | null>(null);
+  const [outputLoading, setOutputLoading] = useState(true);
 
   const contextValue = useMemo(
     () => ({
@@ -130,7 +133,9 @@ export const PlaygroundContextProvider: React.FC<{
       hasLoadedQuery,
       setHasLoadedQuery,
       renderModels,
-      setRenderModels
+      setRenderModels,
+      outputLoading,
+      setOutputLoading
     }),
     [
       config,
@@ -156,7 +161,9 @@ export const PlaygroundContextProvider: React.FC<{
       hasLoadedQuery,
       setHasLoadedQuery,
       renderModels,
-      setRenderModels
+      setRenderModels,
+      outputLoading,
+      setOutputLoading
     ]
   );
 
diff --git a/modelina-website/src/components/playground/GeneratedModels.tsx b/modelina-website/src/components/playground/GeneratedModels.tsx
index c363323106..1d4971122e 100644
--- a/modelina-website/src/components/playground/GeneratedModels.tsx
+++ b/modelina-website/src/components/playground/GeneratedModels.tsx
@@ -13,6 +13,7 @@ const GeneratedModelsComponent: React.FC<GeneratedModelsComponentProps> = ({ sho
   const context = useContext(PlaygroundGeneratedContext);
   const [selectedModel, setSelectedModel] = useState<string>('');
   const { setRenderModels, generatorCode, showGeneratorCode, setShowGeneratorCode } = usePlaygroundContext();
+  const { outputLoading } = usePlaygroundContext();
 
   const toShow = () => {
     let selectedCode = '';
@@ -90,11 +91,17 @@ const GeneratedModelsComponent: React.FC<GeneratedModelsComponentProps> = ({ sho
   return (
     <div className='h-full'>
       <div className='col-span-2 h-full rounded-b bg-code-editor-dark font-bold text-white shadow-lg'>
-        <MonacoEditorWrapper
+     {
+       outputLoading ?
+       <div className = 'loading-text'>
+        <div>Loading...</div>
+       </div> :
+       <MonacoEditorWrapper
           options={{ readOnly: true }}
           language={context?.language}
           value={showGeneratorCode ? generatorCode : selectedCode}
         />
+     }
       </div>
     </div>
   );
diff --git a/modelina-website/src/components/playground/Playground.tsx b/modelina-website/src/components/playground/Playground.tsx
index 5843f5d6a1..02e5b4128f 100644
--- a/modelina-website/src/components/playground/Playground.tsx
+++ b/modelina-website/src/components/playground/Playground.tsx
@@ -43,7 +43,9 @@ const Playground: React.FC<ModelinaPlaygroundProps> = (props) => {
     isLoaded,
     setIsLoaded,
     hasLoadedQuery,
-    setHasLoadedQuery
+    setHasLoadedQuery,
+    outputLoading,
+    setOutputLoading
   } = usePlaygroundContext();
 
   // To avoid hydration error
@@ -53,6 +55,8 @@ const Playground: React.FC<ModelinaPlaygroundProps> = (props) => {
    * Tell the socket io server that we want some code
    */
   const generateNewCode = (inputArgs: string) => {
+    setOutputLoading(true);
+
     try {
       const message: GenerateMessage = {
         ...config,
@@ -102,6 +106,7 @@ const Playground: React.FC<ModelinaPlaygroundProps> = (props) => {
             setError(false);
             setStatusCode(200);
             setErrorMessage('');
+            setOutputLoading(false);
           })
           .catch((error) => {
             console.error(error);
diff --git a/modelina-website/src/styles/globals.css b/modelina-website/src/styles/globals.css
index 1faeb27206..6bbc6a517c 100644
--- a/modelina-website/src/styles/globals.css
+++ b/modelina-website/src/styles/globals.css
@@ -72,3 +72,13 @@ abbr[title] {
     scroll-margin-top: 155px;
   }
 }
+
+.loading-text {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/package-lock.json b/package-lock.json
index 2396e1365e..d89f82c9a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@asyncapi/modelina",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@asyncapi/modelina",
-      "version": "3.8.0",
+      "version": "3.9.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@apidevtools/json-schema-ref-parser": "^11.1.0",
diff --git a/package.json b/package.json
index 3d7f8564f3..d87c0ad447 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@asyncapi/modelina",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Library for generating data models based on inputs such as AsyncAPI, OpenAPI, or JSON Schema documents",
   "license": "Apache-2.0",
   "homepage": "https://www.modelina.org",