diff --git a/src/PageNav.tsx b/src/PageNav.tsx
index dd95d9fb45..b34c19af16 100644
--- a/src/PageNav.tsx
+++ b/src/PageNav.tsx
@@ -1,14 +1,26 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Nav, NavItem, NavList, PageSidebar } from "@patternfly/react-core";
 import { RealmSelector } from "./components/realm-selector/RealmSelector";
+import { DataLoader } from "./components/data-loader/DataLoader";
+import { HttpClientContext } from "./http-service/HttpClientContext";
+import { Realm } from "./models/Realm";
 
 export const PageNav: React.FunctionComponent = () => {
+  const httpClient = useContext(HttpClientContext)!;
+  const realmLoader = async () => {
+    const response = await httpClient.doGet<Realm[]>("/admin/realms");
+    return response.data;
+  };
   return (
     <PageSidebar
       nav={
         <Nav>
           <NavList>
-            <RealmSelector />
+            <DataLoader loader={realmLoader}>
+              {(realmList) => (
+                <RealmSelector realm="Master" realmList={realmList || []} />
+              )}
+            </DataLoader>
             <NavItem id="default-link1" to="/default-link1" itemId={0}>
               Link 1
             </NavItem>
diff --git a/src/components/realm-selector/RealmSelector.test.tsx b/src/components/realm-selector/RealmSelector.test.tsx
index 370dd67ae9..7397d73f76 100644
--- a/src/components/realm-selector/RealmSelector.test.tsx
+++ b/src/components/realm-selector/RealmSelector.test.tsx
@@ -1,36 +1,23 @@
 import React from "react";
-import { Button, AlertVariant } from "@patternfly/react-core";
 import { mount } from "enzyme";
-import EnzymeToJson from "enzyme-to-json";
-import { act } from "react-dom/test-utils";
+import { act } from "@testing-library/react";
 
 import { AlertPanel } from "../alert/AlertPanel";
 import { useAlerts } from "../alert/Alerts";
 
 import { RealmSelector } from "./RealmSelector";
 
-const WithButton = () => {
-  const [add, alerts, hide] = useAlerts();
-  return (
-    <>
-      <AlertPanel alerts={alerts} onCloseAlert={hide} />
-      <Button onClick={() => add("Hello", AlertVariant.default)}>Add</Button>
-    </>
+it("renders realm selector", async () => {
+  const wrapper = mount(
+    <RealmSelector realm="test" realmList={[{ id: "321", realm: "another" }]} />
   );
-};
 
-it("renders realm selector", () => {
-  const tree = mount(<RealmSelector />);
-  const button = tree.find("button");
-  expect(button).not.toBeNull();
+  expect(wrapper.text()).toBe("test");
 
+  const expandButton = wrapper.find("button");
   act(() => {
-    button!.simulate("click");
+    expandButton!.simulate("click");
   });
-  expect(EnzymeToJson(tree)).toMatchSnapshot();
 
-  act(() => {
-    jest.runAllTimers();
-  });
-  expect(EnzymeToJson(tree)).toMatchSnapshot();
+  expect(wrapper.html()).toMatchSnapshot();
 });
diff --git a/src/components/realm-selector/RealmSelector.tsx b/src/components/realm-selector/RealmSelector.tsx
index 3c6a52d702..7c6dabf4ba 100644
--- a/src/components/realm-selector/RealmSelector.tsx
+++ b/src/components/realm-selector/RealmSelector.tsx
@@ -11,33 +11,24 @@ import {
 } from "@patternfly/react-core";
 
 import style from "./realm-selector.module.css";
-import { HttpClientContext } from "../../http-service/HttpClientContext";
 
-export const RealmSelector = () => {
+type RealmSelectorProps = {
+  realm: string;
+  realmList: Realm[];
+};
+
+export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
   const [open, setOpen] = useState(false);
   const history = useHistory();
-  const httpClient = useContext(HttpClientContext);
-  const [realms, setRealms] = useState([] as Realm[]);
-  const [currentRealm, setCurrentRealm] = useState("Master");
+  const [currentRealm, setCurrentRealm] = useState(realm);
 
-  const getRealms = async () => {
-    return await httpClient
-      ?.doGet("/admin/realms")
-      .then((r) => r.data as Realm[]);
-  };
-
-  useEffect(() => {
-    getRealms().then((result) => {
-      setRealms(result || []);
-    });
-  }, []);
-
-  const dropdownItems = realms.map((r) => (
+  const dropdownItems = realmList.map((r) => (
     <DropdownItem
-      component="a"
-      href={"/#/realms/" + r.id}
       key={r.id}
-      onClick={() => setCurrentRealm(r.realm)}
+      onClick={() => {
+        setCurrentRealm(r.realm);
+        setOpen(!open);
+      }}
     >
       {r.realm.charAt(0).toUpperCase() + r.realm.slice(1)}
     </DropdownItem>
diff --git a/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap b/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap
index 26559a37da..fbe693e3e7 100644
--- a/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap
+++ b/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap
@@ -1,587 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders realm selector 1`] = `
-<RealmSelector>
-  <Dropdown
-    dropdownItems={
-      Array [
-        <Divider />,
-        <DropdownItem
-          component="div"
-        >
-          <Button
-            isBlock={true}
-            onClick={[Function]}
-          >
-            Create Realm
-          </Button>
-        </DropdownItem>,
-      ]
-    }
-    id="realm-select"
-    isOpen={false}
-    toggle={
-      <DropdownToggle
-        id="realm-select-toggle"
-        onToggle={[Function]}
-      >
-        Master
-      </DropdownToggle>
-    }
-  >
-    <DropdownWithContext
-      autoFocus={true}
-      className=""
-      direction="down"
-      dropdownItems={
-        Array [
-          <Divider />,
-          <DropdownItem
-            component="div"
-          >
-            <Button
-              isBlock={true}
-              onClick={[Function]}
-            >
-              Create Realm
-            </Button>
-          </DropdownItem>,
-        ]
-      }
-      id="realm-select"
-      isGrouped={false}
-      isOpen={false}
-      isPlain={false}
-      menuAppendTo="inline"
-      onSelect={[Function]}
-      position="left"
-      toggle={
-        <DropdownToggle
-          id="realm-select-toggle"
-          onToggle={[Function]}
-        >
-          Master
-        </DropdownToggle>
-      }
-    >
-      <div
-        className="pf-c-dropdown"
-        data-ouia-component-id={0}
-        data-ouia-component-type="PF4/Dropdown"
-        data-ouia-safe={true}
-        id="realm-select"
-      >
-        <DropdownToggle
-          aria-haspopup={true}
-          getMenuRef={[Function]}
-          id="realm-select-toggle"
-          isOpen={false}
-          isPlain={false}
-          key=".0"
-          onEnter={[Function]}
-          onToggle={[Function]}
-          parentRef={
-            Object {
-              "current": <div
-                class="pf-c-dropdown pf-m-expanded"
-                data-ouia-component-id="1"
-                data-ouia-component-type="PF4/Dropdown"
-                data-ouia-safe="true"
-                id="realm-select"
-              >
-                <button
-                  aria-expanded="true"
-                  aria-haspopup="true"
-                  class="pf-c-dropdown__toggle"
-                  id="realm-select-toggle"
-                  type="button"
-                >
-                  <span
-                    class="pf-c-dropdown__toggle-text"
-                  >
-                    Master
-                  </span>
-                  <span
-                    class="pf-c-dropdown__toggle-icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 320 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </span>
-                </button>
-                <ul
-                  aria-labelledby="realm-select-toggle"
-                  class="pf-c-dropdown__menu"
-                  role="menu"
-                >
-                  <hr
-                    class="pf-c-divider"
-                    index="0"
-                  />
-                  <li
-                    role="menuitem"
-                  >
-                    <div
-                      class="pf-c-dropdown__menu-item"
-                      tabindex="-1"
-                    >
-                      <button
-                        aria-disabled="false"
-                        class="pf-c-button pf-m-primary pf-m-block"
-                        data-ouia-component-id="2"
-                        data-ouia-component-type="PF4/Button"
-                        data-ouia-safe="true"
-                        type="button"
-                      >
-                        Create Realm
-                      </button>
-                    </div>
-                  </li>
-                </ul>
-              </div>,
-            }
-          }
-        >
-          <Toggle
-            aria-haspopup={true}
-            bubbleEvent={false}
-            className=""
-            getMenuRef={[Function]}
-            id="realm-select-toggle"
-            isActive={false}
-            isDisabled={false}
-            isOpen={false}
-            isPlain={false}
-            isPrimary={false}
-            isSplitButton={false}
-            onEnter={[Function]}
-            onToggle={[Function]}
-            parentRef={
-              Object {
-                "current": <div
-                  class="pf-c-dropdown pf-m-expanded"
-                  data-ouia-component-id="1"
-                  data-ouia-component-type="PF4/Dropdown"
-                  data-ouia-safe="true"
-                  id="realm-select"
-                >
-                  <button
-                    aria-expanded="true"
-                    aria-haspopup="true"
-                    class="pf-c-dropdown__toggle"
-                    id="realm-select-toggle"
-                    type="button"
-                  >
-                    <span
-                      class="pf-c-dropdown__toggle-text"
-                    >
-                      Master
-                    </span>
-                    <span
-                      class="pf-c-dropdown__toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style="vertical-align: -0.125em;"
-                        viewBox="0 0 320 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                          transform=""
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <ul
-                    aria-labelledby="realm-select-toggle"
-                    class="pf-c-dropdown__menu"
-                    role="menu"
-                  >
-                    <hr
-                      class="pf-c-divider"
-                      index="0"
-                    />
-                    <li
-                      role="menuitem"
-                    >
-                      <div
-                        class="pf-c-dropdown__menu-item"
-                        tabindex="-1"
-                      >
-                        <button
-                          aria-disabled="false"
-                          class="pf-c-button pf-m-primary pf-m-block"
-                          data-ouia-component-id="2"
-                          data-ouia-component-type="PF4/Button"
-                          data-ouia-safe="true"
-                          type="button"
-                        >
-                          Create Realm
-                        </button>
-                      </div>
-                    </li>
-                  </ul>
-                </div>,
-              }
-            }
-          >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              className="pf-c-dropdown__toggle"
-              disabled={false}
-              id="realm-select-toggle"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              type="button"
-            >
-              <span
-                className="pf-c-dropdown__toggle-text"
-              >
-                Master
-              </span>
-              <span
-                className="pf-c-dropdown__toggle-icon"
-              >
-                <CaretDownIcon
-                  color="currentColor"
-                  noVerticalAlign={false}
-                  size="sm"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 320 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                      transform=""
-                    />
-                  </svg>
-                </CaretDownIcon>
-              </span>
-            </button>
-          </Toggle>
-        </DropdownToggle>
-      </div>
-    </DropdownWithContext>
-  </Dropdown>
-</RealmSelector>
-`;
-
-exports[`renders realm selector 2`] = `
-<RealmSelector>
-  <Dropdown
-    dropdownItems={
-      Array [
-        <Divider />,
-        <DropdownItem
-          component="div"
-        >
-          <Button
-            isBlock={true}
-            onClick={[Function]}
-          >
-            Create Realm
-          </Button>
-        </DropdownItem>,
-      ]
-    }
-    id="realm-select"
-    isOpen={false}
-    toggle={
-      <DropdownToggle
-        id="realm-select-toggle"
-        onToggle={[Function]}
-      >
-        Master
-      </DropdownToggle>
-    }
-  >
-    <DropdownWithContext
-      autoFocus={true}
-      className=""
-      direction="down"
-      dropdownItems={
-        Array [
-          <Divider />,
-          <DropdownItem
-            component="div"
-          >
-            <Button
-              isBlock={true}
-              onClick={[Function]}
-            >
-              Create Realm
-            </Button>
-          </DropdownItem>,
-        ]
-      }
-      id="realm-select"
-      isGrouped={false}
-      isOpen={false}
-      isPlain={false}
-      menuAppendTo="inline"
-      onSelect={[Function]}
-      position="left"
-      toggle={
-        <DropdownToggle
-          id="realm-select-toggle"
-          onToggle={[Function]}
-        >
-          Master
-        </DropdownToggle>
-      }
-    >
-      <div
-        className="pf-c-dropdown"
-        data-ouia-component-id={0}
-        data-ouia-component-type="PF4/Dropdown"
-        data-ouia-safe={true}
-        id="realm-select"
-      >
-        <DropdownToggle
-          aria-haspopup={true}
-          getMenuRef={[Function]}
-          id="realm-select-toggle"
-          isOpen={false}
-          isPlain={false}
-          key=".0"
-          onEnter={[Function]}
-          onToggle={[Function]}
-          parentRef={
-            Object {
-              "current": <div
-                class="pf-c-dropdown pf-m-expanded"
-                data-ouia-component-id="1"
-                data-ouia-component-type="PF4/Dropdown"
-                data-ouia-safe="true"
-                id="realm-select"
-              >
-                <button
-                  aria-expanded="true"
-                  aria-haspopup="true"
-                  class="pf-c-dropdown__toggle"
-                  id="realm-select-toggle"
-                  type="button"
-                >
-                  <span
-                    class="pf-c-dropdown__toggle-text"
-                  >
-                    Master
-                  </span>
-                  <span
-                    class="pf-c-dropdown__toggle-icon"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      height="1em"
-                      role="img"
-                      style="vertical-align: -0.125em;"
-                      viewBox="0 0 320 512"
-                      width="1em"
-                    >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                        transform=""
-                      />
-                    </svg>
-                  </span>
-                </button>
-                <ul
-                  aria-labelledby="realm-select-toggle"
-                  class="pf-c-dropdown__menu"
-                  role="menu"
-                >
-                  <hr
-                    class="pf-c-divider"
-                    index="0"
-                  />
-                  <li
-                    role="menuitem"
-                  >
-                    <div
-                      class="pf-c-dropdown__menu-item"
-                      tabindex="-1"
-                    >
-                      <button
-                        aria-disabled="false"
-                        class="pf-c-button pf-m-primary pf-m-block"
-                        data-ouia-component-id="2"
-                        data-ouia-component-type="PF4/Button"
-                        data-ouia-safe="true"
-                        type="button"
-                      >
-                        Create Realm
-                      </button>
-                    </div>
-                  </li>
-                </ul>
-              </div>,
-            }
-          }
-        >
-          <Toggle
-            aria-haspopup={true}
-            bubbleEvent={false}
-            className=""
-            getMenuRef={[Function]}
-            id="realm-select-toggle"
-            isActive={false}
-            isDisabled={false}
-            isOpen={false}
-            isPlain={false}
-            isPrimary={false}
-            isSplitButton={false}
-            onEnter={[Function]}
-            onToggle={[Function]}
-            parentRef={
-              Object {
-                "current": <div
-                  class="pf-c-dropdown pf-m-expanded"
-                  data-ouia-component-id="1"
-                  data-ouia-component-type="PF4/Dropdown"
-                  data-ouia-safe="true"
-                  id="realm-select"
-                >
-                  <button
-                    aria-expanded="true"
-                    aria-haspopup="true"
-                    class="pf-c-dropdown__toggle"
-                    id="realm-select-toggle"
-                    type="button"
-                  >
-                    <span
-                      class="pf-c-dropdown__toggle-text"
-                    >
-                      Master
-                    </span>
-                    <span
-                      class="pf-c-dropdown__toggle-icon"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        height="1em"
-                        role="img"
-                        style="vertical-align: -0.125em;"
-                        viewBox="0 0 320 512"
-                        width="1em"
-                      >
-                        <path
-                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                          transform=""
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <ul
-                    aria-labelledby="realm-select-toggle"
-                    class="pf-c-dropdown__menu"
-                    role="menu"
-                  >
-                    <hr
-                      class="pf-c-divider"
-                      index="0"
-                    />
-                    <li
-                      role="menuitem"
-                    >
-                      <div
-                        class="pf-c-dropdown__menu-item"
-                        tabindex="-1"
-                      >
-                        <button
-                          aria-disabled="false"
-                          class="pf-c-button pf-m-primary pf-m-block"
-                          data-ouia-component-id="2"
-                          data-ouia-component-type="PF4/Button"
-                          data-ouia-safe="true"
-                          type="button"
-                        >
-                          Create Realm
-                        </button>
-                      </div>
-                    </li>
-                  </ul>
-                </div>,
-              }
-            }
-          >
-            <button
-              aria-expanded={false}
-              aria-haspopup={true}
-              className="pf-c-dropdown__toggle"
-              disabled={false}
-              id="realm-select-toggle"
-              onClick={[Function]}
-              onKeyDown={[Function]}
-              type="button"
-            >
-              <span
-                className="pf-c-dropdown__toggle-text"
-              >
-                Master
-              </span>
-              <span
-                className="pf-c-dropdown__toggle-icon"
-              >
-                <CaretDownIcon
-                  color="currentColor"
-                  noVerticalAlign={false}
-                  size="sm"
-                >
-                  <svg
-                    aria-hidden={true}
-                    aria-labelledby={null}
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style={
-                      Object {
-                        "verticalAlign": "-0.125em",
-                      }
-                    }
-                    viewBox="0 0 320 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                      transform=""
-                    />
-                  </svg>
-                </CaretDownIcon>
-              </span>
-            </button>
-          </Toggle>
-        </DropdownToggle>
-      </div>
-    </DropdownWithContext>
-  </Dropdown>
-</RealmSelector>
-`;
+exports[`renders realm selector 1`] = `"<div id=\\"realm-select\\" class=\\"pf-c-dropdown pf-m-expanded\\" data-ouia-component-type=\\"PF4/Dropdown\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"1\\"><button id=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__toggle\\" type=\\"button\\" aria-expanded=\\"true\\" aria-haspopup=\\"true\\"><span class=\\"pf-c-dropdown__toggle-text\\">test</span><span class=\\"pf-c-dropdown__toggle-icon\\"><svg style=\\"vertical-align: -0.125em;\\" fill=\\"currentColor\\" height=\\"1em\\" width=\\"1em\\" viewBox=\\"0 0 320 512\\" aria-hidden=\\"true\\" role=\\"img\\"><path d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\" transform=\\"\\"></path></svg></span></button><ul aria-labelledby=\\"realm-select-toggle\\" class=\\"pf-c-dropdown__menu\\" role=\\"menu\\"><li role=\\"menuitem\\"><a tabindex=\\"-1\\" aria-disabled=\\"false\\" class=\\"pf-c-dropdown__menu-item\\">Another</a></li><hr class=\\"pf-c-divider\\" index=\\"1\\"><li role=\\"menuitem\\"><div tabindex=\\"-1\\" class=\\"pf-c-dropdown__menu-item\\"><button aria-disabled=\\"false\\" class=\\"pf-c-button pf-m-primary pf-m-block\\" type=\\"button\\" data-ouia-component-type=\\"PF4/Button\\" data-ouia-safe=\\"true\\" data-ouia-component-id=\\"2\\">Create Realm</button></div></li></ul></div>"`;
diff --git a/src/components/scroll-form/ScrollForm.tsx b/src/components/scroll-form/ScrollForm.tsx
index d6a0e81189..1593b14046 100644
--- a/src/components/scroll-form/ScrollForm.tsx
+++ b/src/components/scroll-form/ScrollForm.tsx
@@ -10,29 +10,29 @@ type ScrollFormProps = {
 };
 
 export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
-  const getCurrentSection = () => {
-    for (let sectionName of sections) {
-      const section = document.getElementById(sectionName)!;
-      const startAt = section.offsetTop;
-      const endAt = startAt + section.offsetHeight;
-      const currentPosition =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      const isInView = currentPosition >= startAt && currentPosition < endAt;
-      if (isInView) {
-        return sectionName;
-      }
-    }
-  };
-
   const [active, setActive] = useState(sections[0]);
   useEffect(() => {
+    const getCurrentSection = () => {
+      for (let sectionName of sections) {
+        const section = document.getElementById(sectionName)!;
+        const startAt = section.offsetTop;
+        const endAt = startAt + section.offsetHeight;
+        const currentPosition =
+          document.documentElement.scrollTop || document.body.scrollTop;
+        const isInView = currentPosition >= startAt && currentPosition < endAt;
+        if (isInView) {
+          return sectionName;
+        }
+      }
+    };
+
     window.addEventListener("scroll", () => {
       const active = getCurrentSection();
       if (active) {
         setActive(active);
       }
     });
-  }, [active]);
+  }, [active, sections]);
 
   const Nav = () => (
     <div className={style.sticky}>