Fix taxonomy deletion on skill wizard loading

Seems like skill page renders before deployment type is set and that results in loading SkillFormGithub, and that eventually calls the /api/github/tree api's. Once the deployment type value is set, it renders the SkillFormNative. Calling of /api/github/tree, overwrite the taxonomy if it sees that the remote sha is not same as local sha. This is expected because in case of the github mode local taxonomy is only read only, and it clones the latest taxonomy if remote sha is not equal to local sha. But in native mode, local taxonomy is used for caching the submitted contribution as well, so it doesn't have to pull any new changes upstream because call the taxonomy changes are in the scope of single user and that too present on the same machine. But in both the mode, local taxonomy is store at same place, so in case of native mode, if the api/github/tree api is called, it will see that the remote sha is not same as local sha and it will clone the latest from the upstream. This fix ensure that SkillFormGithub is not loaded in native mode.
Signed-off-by: Anil Vishnoi <vishnoianil@gmail.com>

Author: vishnoianil

src/app/contribute/skill/page.tsx

@@ -3,21 +3,44 @@
 import { AppLayout } from '@/components/AppLayout';
 import { SkillFormGithub } from '@/components/Contribute/Skill/Github/index';
 import { SkillFormNative } from '@/components/Contribute/Skill/Native/index';
+import { t_global_spacer_xl as XlSpacerSize } from '@patternfly/react-tokens';
+import { Flex, Spinner } from '@patternfly/react-core';
 import { useEffect, useState } from 'react';
 
 const SkillFormPage: React.FunctionComponent = () => {
   const [deploymentType, setDeploymentType] = useState<string | undefined>();
+  const [loaded, setLoaded] = useState<boolean>();
+
 
   useEffect(() => {
+    let canceled = false;
+
     const getEnvVariables = async () => {
       const res = await fetch('/api/envConfig');
       const envConfig = await res.json();
-      setDeploymentType(envConfig.DEPLOYMENT_TYPE);
+      if (!canceled) {
+        setDeploymentType(envConfig.DEPLOYMENT_TYPE);
+        setLoaded(true);
+      }
     };
+
     getEnvVariables();
-  }, []);
 
-  return <AppLayout className="contribute-page">{deploymentType === 'native' ? <SkillFormNative /> : <SkillFormGithub />}</AppLayout>;
+    return () => {
+      canceled = true;
+    };
+  }, []);
+  return (
+    <AppLayout className="contribute-page">
+      {loaded ? (
+        <>{deploymentType === 'native' ? <SkillFormNative /> : <SkillFormGithub />}</>
+      ) : (
+        <Flex alignItems={{ default: 'alignItemsCenter' }} justifyContent={{ default: 'justifyContentCenter' }} style={{ padding: XlSpacerSize.var }}>
+          <Spinner size="xl" />
+        </Flex>
+      )}
+    </AppLayout>
+  );
 };
 
 export default SkillFormPage;