O3 2777: Dispensing: Only have Prescription Tabs load when selected (#98

)

src/prescriptions/prescription-tab-lists.component.tsx

@@ -8,22 +8,15 @@ import { useConfig } from "@openmrs/esm-framework";
 import { PharmacyConfig } from "../config-schema";
 import { SimpleLocation } from "../types";
 
-enum TabTypes {
- STARRED,
- SYSTEM,
- USER,
- ALL,
-}
-
 const PrescriptionTabLists: React.FC = () => {
  const { t } = useTranslation();
  const config = useConfig() as PharmacyConfig;
  const { filterLocations, isLoading: isFilterLocationsLoading } =
  useLocationForFiltering(config);
- const [selectedTab, setSelectedTab] = useState(TabTypes.STARRED);
  const [searchTermUserInput, setSearchTermUserInput] = useState(""); // we have a separate "searchTermUserInput" and "searchTerm" in order to debounce
  const [searchTerm, setSearchTerm] = useState("");
  const [location, setLocation] = useState("");
+ const [selectedTab, setSelectedTab] = useState(0);
 
  const tabs = [
  {
@@ -47,14 +40,19 @@ const PrescriptionTabLists: React.FC = () => {
  return () => clearTimeout(debounceFn);
  }, [searchTermUserInput]);
 
+ // we use this to only render the tab panel that is currently selected, see O3-2777
+ const handleTabChange = (event) => {
+ setSelectedTab(event.selectedIndex);
+ };
+
  return (
  <main className={`omrs-main-content ${styles.prescriptionListContainer}`}>
  <section className={styles.prescriptionTabsContainer}>
  <Tabs
  className={styles.prescriptionTabs}
+ onChange={handleTabChange}
  type="container"
  tabContentClassName={styles.hiddenTabsContent}
- onSelectionChange={setSelectedTab}
  >
  <TabList
  aria-label={t("tabList", "Tab List")}
@@ -118,12 +116,14 @@ const PrescriptionTabLists: React.FC = () => {
  </div>
  <TabPanels>
  {tabs.map((tab, index) => {
- return (
+ return index === selectedTab ? (
  <PrescriptionTabPanel
  location={location}
  searchTerm={searchTerm}
  status={tab.status}
  />
+ ) : (
+ <></>
  );
  })}
  </TabPanels>