From 2067279b7f254f963923ed7840b9408cb956d3bc Mon Sep 17 00:00:00 2001 From: waygeance Date: Tue, 3 Mar 2026 19:38:47 +0530 Subject: [PATCH] fixed tooling render issue --- pages/tools/hooks/useToolsTransform.tsx | 52 +++++++++++++++---------- pages/tools/index.page.tsx | 15 +++++++ 2 files changed, 47 insertions(+), 20 deletions(-) diff --git a/pages/tools/hooks/useToolsTransform.tsx b/pages/tools/hooks/useToolsTransform.tsx index 04991b1d0..e84e034c9 100644 --- a/pages/tools/hooks/useToolsTransform.tsx +++ b/pages/tools/hooks/useToolsTransform.tsx @@ -46,24 +46,9 @@ const buildQueryString = (transform: Transform) => { export default function useToolsTransform(tools: JSONSchemaTool[]) { const router = useRouter(); const { query } = router; + const [isReady, setIsReady] = useState(false); - const [transform, setTransform] = useState({ - query: '', - sortBy: 'name', - sortOrder: 'ascending', - groupBy: 'toolingTypes', - languages: [], - licenses: [], - drafts: [], - toolingTypes: [], - environments: [], - showObsolete: 'false', - supportsBowtie: 'false', - }); - - useEffect(() => { - if (!router.isReady) return; - + const getInitialTransform = (): Transform => { const parseArrayParam = ( param: string | string[] | undefined, ): string[] => { @@ -76,7 +61,24 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) { return []; }; - const updatedTransform = { + // If router is not ready, return empty transform (will be updated) + if (!router.isReady) { + return { + query: '', + sortBy: 'name', + sortOrder: 'ascending', + groupBy: 'none', + languages: [], + licenses: [], + drafts: [], + toolingTypes: [], + environments: [], + showObsolete: 'false', + supportsBowtie: 'false', + }; + } + + return { query: (query.query as Transform['query']) || '', sortBy: (query.sortBy as Transform['sortBy']) || 'name', sortOrder: (query.sortOrder as Transform['sortOrder']) || 'ascending', @@ -92,7 +94,15 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) { ) as Transform['environments'], showObsolete: query.showObsolete === 'true' ? 'true' : 'false', supportsBowtie: query.supportsBowtie === 'true' ? 'true' : 'false', - } satisfies Transform; + }; + }; + + const [transform, setTransform] = useState(getInitialTransform); + + useEffect(() => { + if (!router.isReady) return; + + const updatedTransform = getInitialTransform(); const queryString = buildQueryString(updatedTransform); const hash = window.location.hash; @@ -102,7 +112,8 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) { }); setTransform(updatedTransform); - }, [router.isReady]); + setIsReady(true); + }, [router.isReady, query]); useEffect(() => { if (!router.isReady) return; @@ -187,6 +198,7 @@ export default function useToolsTransform(tools: JSONSchemaTool[]) { transform, setTransform: updateTransform, resetTransform, + isReady, }; } diff --git a/pages/tools/index.page.tsx b/pages/tools/index.page.tsx index 1f49f73a6..55d904bf1 100644 --- a/pages/tools/index.page.tsx +++ b/pages/tools/index.page.tsx @@ -112,8 +112,23 @@ export default function ToolingPage({ transform, setTransform, resetTransform, + isReady, } = useToolsTransform(toolingData); + // Don't render until router is ready to prevent flicker + if (!isReady) { + return ( + + + JSON Schema - Tools + +
+
Loading...
+
+ + ); + } + return (