Only load realms when dropdown is opened (#3396)

apps/admin-ui/src/components/realm-selector/RealmSelector.tsx

@@ -7,6 +7,7 @@ import {
   DropdownItem,
   DropdownToggle,
   Label,
+  Spinner,
   Split,
   SplitItem,
 } from "@patternfly/react-core";
@@ -26,7 +27,7 @@ import "./realm-selector.css";
 
 export const RealmSelector = () => {
   const { realm } = useRealm();
-  const { realms } = useRealms();
+  const { realms, refresh } = useRealms();
   const { whoAmI } = useWhoAmI();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -82,16 +83,23 @@ export const RealmSelector = () => {
     navigate(toDashboard({ realm }));
   };
 
-  const dropdownItems = realms.map((r) => (
-    <DropdownItem
-      key={`realm-dropdown-item-${r.realm}`}
-      onClick={() => {
-        selectRealm(r.realm!);
-      }}
-    >
-      <RealmText value={r.realm!} />
-    </DropdownItem>
-  ));
+  const dropdownItems =
+    realms.length !== 0
+      ? realms.map((r) => (
+          <DropdownItem
+            key={`realm-dropdown-item-${r.realm}`}
+            onClick={() => {
+              selectRealm(r.realm!);
+            }}
+          >
+            <RealmText value={r.realm!} />
+          </DropdownItem>
+        ))
+      : [
+          <DropdownItem key="load">
+            Loading <Spinner size="sm" />
+          </DropdownItem>,
+        ];
 
   const addRealmComponent = (
     <Fragment key="Add Realm">
@@ -161,6 +169,7 @@ export const RealmSelector = () => {
               {realm}
             </DropdownToggle>
           }
+          onFocus={refresh}
           dropdownItems={[...dropdownItems, addRealmComponent]}
         />
       )}

apps/admin-ui/src/context/RealmsContext.tsx

@@ -1,6 +1,12 @@
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
 import { sortBy } from "lodash-es";
-import { FunctionComponent, useCallback, useMemo, useState } from "react";
+import {
+  FunctionComponent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import axios from "axios";
 
 import { RecentUsed } from "../components/realm-selector/recent-used";
@@ -24,6 +30,7 @@ export const RealmsProvider: FunctionComponent = ({ children }) => {
   const { keycloak, adminClient } = useAdminClient();
   const [realms, setRealms] = useState<RealmRepresentation[]>([]);
   const recentUsed = useMemo(() => new RecentUsed(), []);
+  const firstRender = useRef(0);
 
   function updateRealms(realms: RealmRepresentation[]) {
     setRealms(sortBy(realms, "realm"));
@@ -32,6 +39,10 @@ export const RealmsProvider: FunctionComponent = ({ children }) => {
 
   useFetch(
     async () => {
+      if (firstRender.current === 0) {
+        firstRender.current = 1;
+        return [];
+      }
       try {
         return await adminClient.realms.find({ briefRepresentation: true });
       } catch (error) {