dce-reactkit 4.0.0-beta-date-and-time.1 → 4.0.0-beta.2

package/dist/esm/types/components/ItemPicker/index.d.ts

@@ -14,7 +14,6 @@ type Props = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
-    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React.FC<Props>;
 export default ItemPicker;

package/dist/esm/types/components/Modal/ModalProps.d.ts

@@ -38,7 +38,5 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
-    isLoading?: boolean;
-    isLoadingCancelable?: boolean;
 };
 export default ModalProps;

package/dist/esm/types/components/SimpleDateChooser.d.ts

@@ -1,7 +1,6 @@
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
- * @author Gardeniu Liu
  */
 import React from 'react';
 type Props = {
@@ -18,8 +17,7 @@ type Props = {
      */
     onChange: (month: number, day: number, year: number) => void;
     numMonthsToShow?: number;
-    dontAllowPast?: boolean;
-    dontAllowFuture?: boolean;
+    chooseFromPast?: boolean;
 };
 declare const SimpleDateChooser: React.FC<Props>;
 export default SimpleDateChooser;

package/dist/esm/types/components/TabBox.d.ts

@@ -6,7 +6,6 @@ import React from 'react';
 type Props = {
     title: React.ReactNode;
     children: React.ReactNode;
-    topRightChildren?: React.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };

package/dist/esm/types/index.d.ts

@@ -7,7 +7,6 @@ import RadioButton from './components/RadioButton';
 import CheckboxButton from './components/CheckboxButton';
 import ButtonInputGroup from './components/ButtonInputGroup';
 import SimpleDateChooser from './components/SimpleDateChooser';
-import SimpleTimeChooser from './components/SimpleTimeChooser';
 import Drawer from './components/Drawer';
 import PopSuccessMark from './components/PopSuccessMark';
 import PopFailureMark from './components/PopFailureMark';
@@ -76,7 +75,6 @@ import mapAsync from './helpers/asyncArrayFunctions/mapAsync';
 import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
-import getWordCount from './helpers/getWordCount';
 import ParamType from './types/ParamType';
 import ModalButtonType from './types/ModalButtonType';
 import ModalSize from './types/ModalSize';
@@ -101,4 +99,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, SimpleTimeChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, getWordCount, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ParamType, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_ROUTE_PATH, LOG_REVIEW_STATUS_ROUTE, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, ParamType, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, LogTypeSpecificInfo, LogMainInfo, LogSourceSpecificInfo, LogLevel, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, };

package/dist/esm/types/types/ReactKitErrorCode.d.ts

@@ -6,8 +6,6 @@ declare enum ReactKitErrorCode {
     NoResponse = "DRK1",
     NoCode = "DRK2",
     SessionExpired = "DRK3",
-    NoCACCLSendRequestFunction = "DRK7",
-    SimpleDateChooserInvalidDateRange = "DRK35",
-    SimpleDateChooserInvalidNumMonths = "DRK36"
+    NoCACCLSendRequestFunction = "DRK7"
 }
 export default ReactKitErrorCode;

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare enum Variant {
  * @author Gabe Abrams
  */
 
-type Props$m = {
+type Props$l = {
     children: React$1.ReactNode;
 };
 /**
@@ -106,7 +106,7 @@ declare const showFatalError: (error: any, errorTitle?: string) => Promise<void>
  * @author Gabe Abrams
  */
 declare const addFatalErrorHandler: (handler: () => void) => void;
-declare const AppWrapper: React$1.FC<Props$m>;
+declare const AppWrapper: React$1.FC<Props$l>;
 
 /**
  * Loading spinner/indicator
@@ -120,14 +120,14 @@ declare const LoadingSpinner: () => React$1.JSX.Element;
  * @author Gabe Abrams
  */
 
-type Props$l = {
+type Props$k = {
     error: any;
     title?: string;
     onClose?: () => void;
     variant?: Variant;
     icon?: IconProp;
 };
-declare const ErrorBox: React$1.FC<Props$l>;
+declare const ErrorBox: React$1.FC<Props$k>;
 
 /**
  * Types of buttons in the modal
@@ -209,8 +209,6 @@ type ModalProps = {
     confirmLabel?: string;
     confirmVariant?: Variant;
     onTopOfOtherModals?: boolean;
-    isLoading?: boolean;
-    isLoadingCancelable?: boolean;
 };
 
 /**
@@ -226,21 +224,20 @@ declare const Modal: React$1.FC<ModalProps>;
  * @author Gabe Abrams
  */
 
-type Props$k = {
+type Props$j = {
     title: React$1.ReactNode;
     children: React$1.ReactNode;
-    topRightChildren?: React$1.ReactNode;
     noBottomMargin?: boolean;
     noBottomPadding?: boolean;
 };
-declare const TabBox: React$1.FC<Props$k>;
+declare const TabBox: React$1.FC<Props$j>;
 
 /**
  * A radio selection button
  * @author Gabe Abrams
  */
 
-type Props$j = {
+type Props$i = {
     text: React$1.ReactNode;
     onSelected: () => void;
     ariaLabel: string;
@@ -254,14 +251,14 @@ type Props$j = {
     small?: boolean;
     useComplexFormatting?: boolean;
 };
-declare const RadioButton: React$1.FC<Props$j>;
+declare const RadioButton: React$1.FC<Props$i>;
 
 /**
  * A checkbox button
  * @author Gabe Abrams
  */
 
-type Props$i = {
+type Props$h = {
     text: React$1.ReactNode;
     onChanged: (checked: boolean) => void;
     ariaLabel: string;
@@ -276,14 +273,14 @@ type Props$i = {
     dashed?: boolean;
     useComplexFormatting?: boolean;
 };
-declare const CheckboxButton: React$1.FC<Props$i>;
+declare const CheckboxButton: React$1.FC<Props$h>;
 
 /**
  * Input group with a title and space for buttons
  * @author Gabe Abrams
  */
 
-type Props$h = {
+type Props$g = {
     label: React$1.ReactNode;
     minLabelWidth?: string;
     children: React$1.ReactNode;
@@ -292,15 +289,14 @@ type Props$h = {
     isAdminFeature?: boolean;
     noMarginOnBottom?: boolean;
 };
-declare const ButtonInputGroup: React$1.FC<Props$h>;
+declare const ButtonInputGroup: React$1.FC<Props$g>;
 
 /**
  * A very simple, lightweight date chooser
  * @author Gabe Abrams
- * @author Gardeniu Liu
  */
 
-type Props$g = {
+type Props$f = {
     ariaLabel: string;
     name: string;
     month: number;
@@ -314,30 +310,9 @@ type Props$g = {
      */
     onChange: (month: number, day: number, year: number) => void;
     numMonthsToShow?: number;
-    dontAllowPast?: boolean;
-    dontAllowFuture?: boolean;
+    chooseFromPast?: boolean;
 };
-declare const SimpleDateChooser: React$1.FC<Props$g>;
-
-/**
- * A very simple, lightweight time chooser
- * @author Gardenia Liu
- */
-
-type Props$f = {
-    ariaLabel: string;
-    name: string;
-    hour: number;
-    minute: number;
-    /**
-     * Handler for when time changes
-     * @param hour new 24hr hour number
-     * @param minute new minute number
-     */
-    onChange: (hour: number, minute: number) => void;
-    intervalMin?: number;
-};
-declare const SimpleTimeChooser: React$1.FC<Props$f>;
+declare const SimpleDateChooser: React$1.FC<Props$f>;
 
 /**
  * Drawer container
@@ -437,7 +412,6 @@ type Props$9 = {
      */
     onChanged: (updatedItems: PickableItem[]) => void;
     noBottomMargin?: boolean;
-    hideSelectAllOrNoneButtons?: boolean;
 };
 declare const ItemPicker: React$1.FC<Props$9>;
 
@@ -1524,16 +1498,6 @@ declare const capitalize: (str: string) => string;
  */
 declare const shuffleArray: <T>(arr: T[]) => T[];
 
-/**
- * Get number of words in string
- * @author Gardenia Liu
- * @author Allison Zhang
- * @author Gabe Abrams
- * @param text the string to check
- * @returns number of words in the string
- */
-declare const getWordCount: (text: string) => number;
-
 /**
  * Days of the week
  * @author Gabe Abrams
@@ -1572,9 +1536,7 @@ declare enum ReactKitErrorCode {
     NoResponse = "DRK1",
     NoCode = "DRK2",
     SessionExpired = "DRK3",
-    NoCACCLSendRequestFunction = "DRK7",
-    SimpleDateChooserInvalidDateRange = "DRK35",
-    SimpleDateChooserInvalidNumMonths = "DRK36"
+    NoCACCLSendRequestFunction = "DRK7"
 }
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_REVIEW_STATUS_ROUTE, LOG_ROUTE_PATH, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogLevel, LogMainInfo, LogMetadataType, LogReviewer, LogSource, LogSourceSpecificInfo, LogType, LogTypeSpecificInfo, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, SimpleTimeChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, getWordCount, idify, initClient, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LOG_REVIEW_ROUTE_PATH_PREFIX, LOG_REVIEW_STATUS_ROUTE, LOG_ROUTE_PATH, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogLevel, LogMainInfo, LogMetadataType, LogReviewer, LogSource, LogSourceSpecificInfo, LogType, LogTypeSpecificInfo, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, idify, initClient, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "4.0.0-beta-date-and-time.1",
+  "version": "4.0.0-beta.2",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -33,7 +33,7 @@
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
     "@fortawesome/react-fontawesome": "^x.x.x",
     "bootstrap": "^5.x.x",
-    "react": "^x.x.x"
+    "react": "^19.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",

package/src/components/IntelliTable.tsx

@@ -315,7 +315,7 @@ const IntelliTable: React.FC<Props> = (props) => {
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column in the ${title} table`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Light}
+                uncheckedVariant={Variant.Secondary}
               />
             );
           })

package/src/components/ItemPicker/NestableItemList.tsx

@@ -272,7 +272,6 @@ const NestableItemList: React.FC<Props> = (props) => {
                 }}
                 ariaLabel={`Select ${item.name}`}
                 checkedVariant={Variant.Light}
-                uncheckedVariant={Variant.Light}
               />
 
               {/* Children */}

package/src/components/ItemPicker/index.tsx

@@ -33,8 +33,6 @@ type Props = {
   onChanged: (updatedItems: PickableItem[]) => void,
   // If true, don't add margin to bottom of item picker
   noBottomMargin?: boolean,
-  // If true, hide select all or none buttons
-  hideSelectAllOrNoneButtons?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -54,61 +52,12 @@ const ItemPicker: React.FC<Props> = (props) => {
     items,
     onChanged,
     noBottomMargin,
-    hideSelectAllOrNoneButtons,
   } = props;
 
   /*------------------------------------------------------------------------*/
   /* ------------------------- Component Functions ------------------------ */
   /*------------------------------------------------------------------------*/
 
-  /**
-   * Updates the checked state of an item (including all children)
-   * @author Yuen Ler Chow
-   * @param item the item to update
-   * @param checked the new checked state
-   * @returns the updated item
-   */
-  const updateItemChecked = (
-    item: PickableItem,
-    checked: boolean,
-  ): PickableItem => {
-    if (item.isGroup) {
-      return {
-        ...item,
-        children: item.children.map((child) => {
-          return updateItemChecked(child, checked);
-        }),
-      };
-    }
-    return { ...item, checked };
-  };
-
-  /**
-   * Selects all items in the list
-   * @author Yuen Ler Chow
-   */
-  const handleSelectAll = () => {
-    const updatedItems = items.map(
-      (item) => {
-        return updateItemChecked(item, true);
-      },
-    );
-    onChanged(updatedItems);
-  };
-
-  /**
-   * Deselects all items in the list
-   * @author Yuen Ler Chow
-   */
-  const handleDeselectAll = () => {
-    const updatedItems = items.map(
-      (item) => {
-        return updateItemChecked(item, false);
-      },
-    );
-    onChanged(updatedItems);
-  };
-
   /*------------------------------------------------------------------------*/
   /* ------------------------------- Render ------------------------------- */
   /*------------------------------------------------------------------------*/
@@ -117,55 +66,10 @@ const ItemPicker: React.FC<Props> = (props) => {
   /* --------------- Main UI -------------- */
   /*----------------------------------------*/
 
-  // Select all/none
-  const selectAllOrNone = (
-    !hideSelectAllOrNoneButtons
-      ? (
-        <div
-          className="d-flex h-100 align-items-end flex-row"
-        >
-          <div className="d-flex justify-content-end">
-            {/* Label */}
-            <div
-              className="me-2"
-              style={{ fontSize: '1.2rem' }}
-            >
-              Select
-            </div>
-            {/* Buttons */}
-            <div className="btn-group" role="group">
-              {/* All */}
-              <button
-                type="button"
-                style={{ borderRight: '0.1rem solid white' }}
-                aria-label="Select all contexts"
-                className="btn btn-secondary py-0"
-                onClick={handleSelectAll}
-              >
-                All
-              </button>
-              {/* None */}
-              <button
-                type="button"
-                aria-label="Deselect all contexts"
-                className="btn btn-secondary py-0"
-                onClick={handleDeselectAll}
-              >
-                None
-              </button>
-            </div>
-          </div>
-        </div>
-      )
-      : undefined
-  );
-
-  // Main UI
   return (
     <TabBox
       title={title}
       noBottomMargin={noBottomMargin}
-      topRightChildren={selectAllOrNone}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList

package/src/components/LogReviewer.tsx

@@ -1182,7 +1182,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.startDate.year}
               month={dateFilterState.startDate.month}
               day={dateFilterState.startDate.day}
-              dontAllowFuture
+              chooseFromPast
               numMonthsToShow={36}
               onChange={(month, day, year) => {
                 dateFilterState.startDate = { month, day, year };
@@ -1198,7 +1198,7 @@ const LogReviewer: React.FC<Props> = (props) => {
               year={dateFilterState.endDate.year}
               month={dateFilterState.endDate.month}
               day={dateFilterState.endDate.day}
-              dontAllowFuture
+              chooseFromPast
               numMonthsToShow={12}
               onChange={(month, day, year) => {
                 if (

package/src/components/Modal/ModalProps.ts

@@ -69,10 +69,6 @@ type ModalProps = {
   confirmVariant?: Variant,
   // True if modal should be on top of other modals
   onTopOfOtherModals?: boolean,
-  // If true, the modal is loading
-  isLoading?: boolean,
-  // If true, the loading is cancelable
-  isLoadingCancelable?: boolean,
 };
 
 export default ModalProps;

package/src/components/Modal/index.tsx

@@ -14,9 +14,6 @@ import React, { useState, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 // Import other components
-import LoadingSpinner from '../LoadingSpinner';
-
-// Import helpers
 import waitMs from '../../helpers/waitMs';
 
 // Import types
@@ -44,7 +41,6 @@ const BASE_Z_INDEX_ON_TOP = 2000000000;
 
 // Constants
 const MS_TO_ANIMATE = 200; // Animation duration
-const MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR = 1000;
 
 // Modal type to list of buttons
 const modalTypeToModalButtonTypes: {
@@ -260,8 +256,6 @@ const Modal: React.FC<ModalProps> = (props) => {
     dontAllowBackdropExit,
     dontShowXButton,
     onTopOfOtherModals,
-    isLoading,
-    isLoadingCancelable,
   } = props;
 
   // Determine if no header either
@@ -272,7 +266,6 @@ const Modal: React.FC<ModalProps> = (props) => {
   // True if animation is in use
   const [animatingIn, setAnimatingIn] = useState(true);
   const [animatingPop, setAnimatingPop] = useState(false);
-  const [showModal, setShowModal] = useState(false);
 
   /* -------------- Refs -------------- */
 
@@ -305,15 +298,6 @@ const Modal: React.FC<ModalProps> = (props) => {
         if (mounted.current) {
           setAnimatingIn(false);
         }
-        if (isLoading) {
-          // wait before showing modal
-          await waitMs(MS_TO_WAIT_BEFORE_SHOWING_LOADING_INDICATOR);
-          if (mounted.current) {
-            setShowModal(true);
-          }
-        } else {
-          setShowModal(true);
-        }
       })();
 
       return () => {
@@ -416,17 +400,6 @@ const Modal: React.FC<ModalProps> = (props) => {
     animationClass = 'Modal-animating-pop';
   }
 
-  // default to show close button when not loading and not show close button when loading
-  // unless downShowXButton or isLoadingCancelable
-  const showCloseButton = (
-    // The modal must have an onClose function
-    onClose
-    // ...and the close button is allowed to be visible
-    && !dontShowXButton
-    // ...and should not be shown if the modal is loading and not cancelable
-    && !(isLoading && !isLoadingCancelable)
-  );
-
   // Render the modal
   const contentToRender = (
     <div
@@ -463,8 +436,6 @@ const Modal: React.FC<ModalProps> = (props) => {
           handleClose(ModalButtonType.Cancel);
         }}
       />
-
-      {showModal && (
       <div
         className={`modal-dialog modal-${size} ${animationClass} modal-dialog-scrollable modal-dialog-centered`}
         style={{
@@ -527,7 +498,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                 {title}
               </h5>
 
-              {showCloseButton && (
+              {(onClose && !dontShowXButton) && (
                 <button
                   type="button"
                   className="Modal-x-button btn-close"
@@ -547,34 +518,25 @@ const Modal: React.FC<ModalProps> = (props) => {
               )}
             </div>
           )}
-
-          <div
-            className="modal-body"
-            style={{
-              color: (
-                isDarkModeOn()
-                  ? 'white'
-                  : undefined
-              ),
-              backgroundColor: (
-                isDarkModeOn()
-                  ? '#444'
-                  : undefined
-              ),
-            }}
-          >
-            {
-              isLoading
-                ? (
-                  <>
-                    <LoadingSpinner />
-                    <span className="sr-only">Content loading</span>
-                  </>
-                )
-                : children
-            }
-          </div>
-
+          {children && (
+            <div
+              className="modal-body"
+              style={{
+                color: (
+                  isDarkModeOn()
+                    ? 'white'
+                    : undefined
+                ),
+                backgroundColor: (
+                  isDarkModeOn()
+                    ? '#444'
+                    : undefined
+                ),
+              }}
+            >
+              {children}
+            </div>
+          )}
           {footer && (
             <div
               className="modal-footer pt-1 pb-1"
@@ -601,7 +563,6 @@ const Modal: React.FC<ModalProps> = (props) => {
           )}
         </div>
       </div>
-      )}
     </div>
   );