feat: added loading text (#2132)

asyncapi · Dec 2, 2024 · b7f45a6 · b7f45a6
1 parent 12ea332
commit b7f45a6
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}