From 7efb023c35d787e6abb8f3b02c531ed40b0c913f Mon Sep 17 00:00:00 2001 From: Shriya-Chauhan Date: Sat, 30 Nov 2024 20:05:25 +0530 Subject: [PATCH 1/5] first loader commit --- .../src/components/contexts/PlaygroundContext.tsx | 11 +++++++++-- .../src/components/playground/GeneratedModels.tsx | 9 ++++++++- .../src/components/playground/Playground.tsx | 11 +++++++++-- modelina-website/src/styles/globals.css | 10 ++++++++++ 4 files changed, 36 insertions(+), 5 deletions(-) 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>; renderModels: React.ReactNode | null; setRenderModels: (models: React.ReactNode) => void; + outputLoading: boolean; + setOutputLoading: Dispatch>; } const PlaygroundContext = createContext(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(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 = ({ sho const context = useContext(PlaygroundGeneratedContext); const [selectedModel, setSelectedModel] = useState(''); const { setRenderModels, generatorCode, showGeneratorCode, setShowGeneratorCode } = usePlaygroundContext(); + const { outputLoading } = usePlaygroundContext(); const toShow = () => { let selectedCode = ''; @@ -90,11 +91,17 @@ const GeneratedModelsComponent: React.FC = ({ sho return (
- +
Loading...
+
: + + }
); diff --git a/modelina-website/src/components/playground/Playground.tsx b/modelina-website/src/components/playground/Playground.tsx index 5843f5d6a1..476dbc7167 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 = (props) => { isLoaded, setIsLoaded, hasLoadedQuery, - setHasLoadedQuery + setHasLoadedQuery, + outputLoading, + setOutputLoading } = usePlaygroundContext(); // To avoid hydration error @@ -53,6 +55,8 @@ const Playground: React.FC = (props) => { * Tell the socket io server that we want some code */ const generateNewCode = (inputArgs: string) => { + setOutputLoading(true); + try { const message: GenerateMessage = { ...config, @@ -102,12 +106,14 @@ const Playground: React.FC = (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.'); setStatusCode(500); + setOutputLoading(true); }); } } catch (e: any) { @@ -115,8 +121,9 @@ const Playground: React.FC = (props) => { setError(true); setErrorMessage('Input is not a correct AsyncAPI document, so it cannot be processed.'); setStatusCode(400); + setOutputLoading(true); } - }; + }; /** * Set a query key and value diff --git a/modelina-website/src/styles/globals.css b/modelina-website/src/styles/globals.css index 1faeb27206..ca430bcfb0 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; +} \ No newline at end of file From 8b982659b78e782de5f390e4ac809cedc6201379 Mon Sep 17 00:00:00 2001 From: Shriya-Chauhan Date: Sat, 30 Nov 2024 20:32:40 +0530 Subject: [PATCH 2/5] removing lint error --- modelina-website/src/components/playground/Playground.tsx | 2 +- modelina-website/src/styles/globals.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modelina-website/src/components/playground/Playground.tsx b/modelina-website/src/components/playground/Playground.tsx index 476dbc7167..9b36bcef9a 100644 --- a/modelina-website/src/components/playground/Playground.tsx +++ b/modelina-website/src/components/playground/Playground.tsx @@ -123,7 +123,7 @@ const Playground: React.FC = (props) => { setStatusCode(400); setOutputLoading(true); } - }; + }; /** * Set a query key and value diff --git a/modelina-website/src/styles/globals.css b/modelina-website/src/styles/globals.css index ca430bcfb0..6bbc6a517c 100644 --- a/modelina-website/src/styles/globals.css +++ b/modelina-website/src/styles/globals.css @@ -81,4 +81,4 @@ abbr[title] { display: flex; justify-content: center; align-items: center; -} \ No newline at end of file +} From 97b9a5f93b4fee2aabd355d72c6c699246e5d58d Mon Sep 17 00:00:00 2001 From: Shriya-Chauhan Date: Sun, 1 Dec 2024 16:34:22 +0530 Subject: [PATCH 3/5] fixed loading screens on error encounter --- modelina-website/src/components/playground/Playground.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/modelina-website/src/components/playground/Playground.tsx b/modelina-website/src/components/playground/Playground.tsx index 9b36bcef9a..02e5b4128f 100644 --- a/modelina-website/src/components/playground/Playground.tsx +++ b/modelina-website/src/components/playground/Playground.tsx @@ -113,7 +113,6 @@ const Playground: React.FC = (props) => { setError(true); setErrorMessage('Input is not a correct AsyncAPI document, so it cannot be processed.'); setStatusCode(500); - setOutputLoading(true); }); } } catch (e: any) { @@ -121,7 +120,6 @@ const Playground: React.FC = (props) => { setError(true); setErrorMessage('Input is not a correct AsyncAPI document, so it cannot be processed.'); setStatusCode(400); - setOutputLoading(true); } }; From d70217f6bd0d788e0a6091e91e62b5eaa51aa983 Mon Sep 17 00:00:00 2001 From: Shriya-Chauhan Date: Thu, 2 Jan 2025 23:31:57 +0530 Subject: [PATCH 4/5] dev --- modelina-website/src/components/CodeBlock.tsx | 12 +++++++---- .../src/components/icons/Clipboard.tsx | 2 +- .../src/components/icons/IconCheck.tsx | 21 +++++++++++++++++++ 3 files changed, 30 insertions(+), 5 deletions(-) create mode 100644 modelina-website/src/components/icons/IconCheck.tsx diff --git a/modelina-website/src/components/CodeBlock.tsx b/modelina-website/src/components/CodeBlock.tsx index 80c1cf0631..24cac5d506 100644 --- a/modelina-website/src/components/CodeBlock.tsx +++ b/modelina-website/src/components/CodeBlock.tsx @@ -5,6 +5,7 @@ import Highlight from 'react-syntax-highlighter'; import Caption from './Caption'; import IconClipboard from './icons/Clipboard'; +import IconCheck from './icons/IconCheck'; const theme = { hljs: { @@ -270,10 +271,13 @@ export default function CodeBlock({ className='absolute right-2 top-1 z-50 cursor-pointer bg-code-editor-dark text-xs text-gray-500 hover:text-gray-300 focus:outline-none' title='Copy to clipboard' > - {showIsCopied && Copied!} - - - + + {showIsCopied ? ( + + ) : ( + + )} + )} diff --git a/modelina-website/src/components/icons/Clipboard.tsx b/modelina-website/src/components/icons/Clipboard.tsx index c01991b3ba..548063212b 100644 --- a/modelina-website/src/components/icons/Clipboard.tsx +++ b/modelina-website/src/components/icons/Clipboard.tsx @@ -1,6 +1,6 @@ export default function IconClipboard({ className }: any) { return ( - + ); diff --git a/modelina-website/src/components/icons/IconCheck.tsx b/modelina-website/src/components/icons/IconCheck.tsx new file mode 100644 index 0000000000..46426c86e2 --- /dev/null +++ b/modelina-website/src/components/icons/IconCheck.tsx @@ -0,0 +1,21 @@ +export default function IconCheck({ className }: any) { + return ( + + + + + ); + } + \ No newline at end of file From 84089b904a5b7902b2a443447faf530213921aef Mon Sep 17 00:00:00 2001 From: Shriya-Chauhan Date: Thu, 2 Jan 2025 23:44:14 +0530 Subject: [PATCH 5/5] dev --- modelina-website/src/components/icons/Clipboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modelina-website/src/components/icons/Clipboard.tsx b/modelina-website/src/components/icons/Clipboard.tsx index 548063212b..c01991b3ba 100644 --- a/modelina-website/src/components/icons/Clipboard.tsx +++ b/modelina-website/src/components/icons/Clipboard.tsx @@ -1,6 +1,6 @@ export default function IconClipboard({ className }: any) { return ( - + );