Fix Disappearing Env Value Reqest Access Modal (#919)

### Feature or Bugfix
<!-- please choose -->
- Bugfix

### Detail
- When requesting access environment dropdown value sometimes disappears
and becomes blank
- Believed root cause is that `environmentOptions` needs to finish
loading before the request access modal allows users to select an
environment so that the selection does not disappear

### Relates
- #916

### Security
Please answer the questions below briefly where applicable, or write
`N/A`. Based on
[OWASP 10](https://owasp.org/Top10/en/).

- Does this PR introduce or modify any input fields or queries - this
includes
fetching data from storage outside the application (e.g. a database, an
S3 bucket)?
  - Is the input sanitized?
- What precautions are you taking before deserializing the data you
consume?
  - Is injection prevented by parametrizing queries?
  - Have you ensured no `eval` or similar functions are used?
- Does this PR introduce any functionality or component that requires
authorization?
- How have you ensured it respects the existing AuthN/AuthZ mechanisms?
  - Are you logging failed auth attempts?
- Are you using or adding any cryptographic features?
  - Do you use a standard proven implementations?
  - Are the used keys controlled by the customer? Where are they stored?
- Are you introducing any new policies/roles/users?
  - Have you used the least-privilege principle? How?


By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache 2.0 license.

frontend/src/modules/Catalog/components/RequestAccessModal.js

@@ -35,29 +35,37 @@ export const RequestAccessModal = (props) => {
   const client = useClient();
   const [environmentOptions, setEnvironmentOptions] = useState([]);
   const [loadingGroups, setLoadingGroups] = useState(false);
+  const [loadingEnvs, setLoadingEnvs] = useState(false);
   const [groupOptions, setGroupOptions] = useState([]);
   const [loadingRoles, setLoadingRoles] = useState(false);
   const [roleOptions, setRoleOptions] = useState([]);
 
   const fetchEnvironments = useCallback(async () => {
-    const response = await client.query(
-      listValidEnvironments({
-        filter: Defaults.selectListFilter
-      })
-    );
-    if (!response.errors) {
-      setEnvironmentOptions(
-        response.data.listValidEnvironments.nodes.map((e) => ({
-          ...e,
-          value: e.environmentUri,
-          label: e.label
-        }))
+    setLoadingEnvs(true);
+    try {
+      const response = await client.query(
+        listValidEnvironments({
+          filter: Defaults.selectListFilter
+        })
       );
-    } else {
-      dispatch({ type: SET_ERROR, error: response.errors[0].message });
-    }
-    if (stopLoader) {
-      stopLoader();
+      if (!response.errors) {
+        setEnvironmentOptions(
+          response.data.listValidEnvironments.nodes.map((e) => ({
+            ...e,
+            value: e.environmentUri,
+            label: e.label
+          }))
+        );
+      } else {
+        dispatch({ type: SET_ERROR, error: response.errors[0].message });
+      }
+    } catch (e) {
+      dispatch({ type: SET_ERROR, error: e.message });
+    } finally {
+      if (stopLoader) {
+        stopLoader();
+      }
+      setLoadingEnvs(false);
     }
   }, [client, dispatch, stopLoader]);
 
@@ -210,7 +218,7 @@ export const RequestAccessModal = (props) => {
     }
   }
 
-  if (!hit) {
+  if (!hit || loadingEnvs) {
     return null;
   }