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 directory location, 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 <[email protected]>

Author: vishnoianil

src/app/contribute/skill/page.tsx

@@ -3,21 +3,43 @@
 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;