Feat/1152 activity loader

package.json

@@ -61,5 +61,13 @@
     "prettier": "^3.2.5",
     "tslib": "^1.10.0",
     "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@asyncapi/react-component": "^2.6.4",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/view": "^6.38.2",
+    "@types/js-yaml": "^4.0.9",
+    "@uiw/react-codemirror": "^4.25.1",
+    "js-yaml": "^4.1.0"
   }
 }

playground/app/globals.css

@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+

playground/app/page.tsx

@@ -13,6 +13,7 @@ import {
   CodeEditorsWrapper,
   AsyncApiWrapper,
   SplitWrapper,
+  PlaygroundSkeleton, // Add this import
 } from '@/components';
 import { defaultConfig, parse, debounce } from '@/utils';
 import * as specs from '@/specs';
@@ -24,17 +25,24 @@ interface State {
   config: string;
   schemaFromExternalResource: string;
   refreshing: boolean;
+  isLoading: boolean;
+  stylesLoaded: boolean;
 }
 
 class Playground extends Component<unknown, State> {
   updateSchemaFn: (value: string) => void;
   updateConfigFn: (value: string) => void;
+  private loadingTimer?: NodeJS.Timeout;
+  private styleCheckInterval?: NodeJS.Timeout;
+  private maxTimer?: NodeJS.Timeout;
 
   state = {
     schema: defaultSchema,
     config: defaultConfig,
     schemaFromExternalResource: '',
     refreshing: false,
+    isLoading: true,
+    stylesLoaded: false,
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -54,8 +62,64 @@ class Playground extends Component<unknown, State> {
     );
   }
 
+  componentDidMount() {
+    this.initializeLoader();
+  }
+
+  componentWillUnmount() {
+    this.cleanupTimers();
+  }
+
+  private cleanupTimers = () => {
+    if (this.loadingTimer) clearTimeout(this.loadingTimer);
+    if (this.styleCheckInterval) clearInterval(this.styleCheckInterval);
+    if (this.maxTimer) clearTimeout(this.maxTimer);
+  };
+
+  private initializeLoader = () => {
+    const checkStylesLoaded = () => {
+      const asyncApiStyles = document.querySelector('link[href*="default.min.css"]');
+      const computedStyle = window.getComputedStyle(document.body);
+
+      if (asyncApiStyles && computedStyle && !this.state.stylesLoaded) {
+        this.setState({ stylesLoaded: true });
+      }
+    };
+
+    // Initial check
+    checkStylesLoaded();
+
+    // Set minimum loading time (600ms)
+    this.loadingTimer = setTimeout(() => {
+      if (this.state.stylesLoaded) {
+        this.setState({ isLoading: false });
+      }
+    }, 600);
+
+    // Check for styles periodically
+    this.styleCheckInterval = setInterval(checkStylesLoaded, 100);
+
+    // Fallback - hide loader after 2 seconds max
+    this.maxTimer = setTimeout(() => {
+      this.setState({ isLoading: false });
+    }, 2000);
+  };
+
+  componentDidUpdate(prevProps: unknown, prevState: State) {
+    if (prevState.stylesLoaded !== this.state.stylesLoaded && this.state.stylesLoaded) {
+      setTimeout(() => {
+        this.setState({ isLoading: false });
+      }, 100);
+    }
+  }
+
   render() {
-    const { schema, config, schemaFromExternalResource } = this.state;
+    const { schema, config, schemaFromExternalResource, isLoading } = this.state;
+
+    if (isLoading) {
+      return <PlaygroundSkeleton />;
+    }
+
     const parsedConfig = parse<ConfigInterface>(config || defaultConfig);
 
     return (
@@ -123,4 +187,4 @@ class Playground extends Component<unknown, State> {
   };
 }
 
-export default Playground;
+export default Playground;

playground/components/CodeEditorComponent.tsx

@@ -50,4 +50,4 @@ class CodeEditorComponent extends Component<Props, State> {
   }
 }
 
-export default CodeEditorComponent;
+export default CodeEditorComponent;

playground/components/index.ts

@@ -5,3 +5,4 @@ export { default as SplitWrapper } from './SplitWrapper';
 export { default as Tabs } from './Tabs';
 export { default as Tab } from './Tab';
 export * from './styled';
+export * from './loaders';

playground/components/loaders/PlaygroundSkeleton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+    NavigationSkeleton,
+    TabsSkeleton,
+    CodeEditorSkeleton,
+    DocumentationSkeleton,
+} from './skeletonComponents';
+
+export const PlaygroundSkeleton: React.FC = () => (
+    <div className="h-screen bg-slate-900 text-white flex flex-col">
+        <NavigationSkeleton />
+        <div className="flex-1 flex">
+            {/* Left Panel - Code Editors */}
+            <div className="w-1/2 border-r border-slate-600 flex flex-col">
+                <TabsSkeleton />
+                <div className="flex-1">
+                    <CodeEditorSkeleton />
+                </div>
+            </div>
+
+            {/* Right Panel - Documentation */}
+            <div className="w-1/2">
+                <DocumentationSkeleton />
+            </div>
+        </div>
+    </div>
+);

playground/components/loaders/index.ts

@@ -0,0 +1,2 @@
+export * from './skeletonComponents';
+export * from './PlaygroundSkeleton';