@rpcbase/ui 0.17.0 → 0.19.0

package/package.json

@@ -1,54 +1,19 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.17.0",
-  "license": "SSPL-1.0",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "**/*.js",
-    "**/*.css",
-    "**/*.scss",
-    "!**/*.test.js",
-    "!.wireit/**"
-  ],
+  "version": "0.19.0",
+  "type": "module",
+  "main": "./src/index.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 0"
+    "release": "wireit"
   },
   "wireit": {
-    "install": {
-      "command": "NODE_ENV=development yarn install --mutex network --frozen-lockfile",
-      "files": [
-        "yarn.lock"
-      ],
-      "output": [
-        "node_modules/"
-      ],
-      "allowUsuallyExcludedPaths": true
-    },
-    "apply-version": {
-      "command": "node ../../scripts/prflow/apply-prerelease-versions.js $BRANCH_NAME",
-      "files": [
-        "package.json"
-      ],
-      "output": [],
-      "env": {
-        "BRANCH_NAME": {
-          "external": true
-        }
-      }
-    },
     "release": {
-      "command": "npm publish --tag $NPM_RELEASE_CHANNEL | tee publish-output.txt",
-      "dependencies": [
-        "apply-version"
-      ],
+      "command": "../../scripts/publish.js",
+      "dependencies": [],
       "files": [
         "package.json"
       ],
-      "output": [
-        "publish-output.txt"
-      ],
+      "output": [],
       "env": {
         "NPM_RELEASE_CHANNEL": {
           "external": true
@@ -56,8 +21,6 @@
       }
     }
   },
-  "dependencies": {
-    "@rpcbase/lottie": "3.5.3",
-    "@ui-kitten/components": "5.3.1"
-  }
+  "dependencies": {},
+  "devDependencies": {}
 }

package/src/Checkbox/index.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+interface CheckboxProps
+  extends Partial<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">> {
+  id: string;
+  name: string;
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Checkbox = ({
+  id,
+  name,
+  defaultValue,
+  defaultChecked,
+  checked,
+  onChange,
+  ...props
+}: CheckboxProps) => {
+  return (
+    <div className="flex h-6 shrink-0 items-center">
+      <div className="group grid size-4 grid-cols-1">
+        <input
+          {...props}
+          id={id}
+          name={name}
+          type="checkbox"
+          defaultValue={defaultValue}
+          defaultChecked={defaultChecked}
+          checked={checked}
+          onChange={onChange}
+          className="col-start-1 row-start-1 appearance-none cursor-pointer rounded-sm border border-gray-300 bg-white checked:border-sky-600 checked:bg-sky-600 indeterminate:border-sky-600 indeterminate:bg-sky-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+        />
+        <svg
+          fill="none"
+          viewBox="0 0 14 14"
+          className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
+        >
+          <path
+            d="M3 8L6 11L11 3.5"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="opacity-0 group-has-checked:opacity-100"
+          />
+          <path
+            d="M3 7H11"
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="opacity-0 group-has-indeterminate:opacity-100"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./Checkbox"

package/ActivityIndicator/index.js

@@ -1,113 +0,0 @@
-/* @flow */
-import assert from "assert"
-import {useEffect, useRef} from "react"
-import {Animated, StyleSheet, View, ViewStyle} from "react-native"
-
-import {withStyles} from "@ui-kitten/components/theme/theme/withStyles"
-import {SpinnerAnimation} from "@ui-kitten/components/ui/spinner/animation"
-
-
-type SizeType = {width: number, height: number}
-
-type ArcElementStyle = {
-  container: ViewStyle,
-  arc: ViewStyle,
-  overflow?: ViewStyle,
-}
-
-const styles = StyleSheet.create({
-  noOverflow: {
-    overflow: "hidden",
-  },
-})
-
-const ActivityIndicator = ({
-  animating = true,
-  size = 24,
-  strokeWidth = 2.6,
-  duration = 1600,
-  color = "#007BFF",
-  testID = "activity-indicator",
-  style = {},
-}) => {
-  const animationRef = useRef(new SpinnerAnimation(size, {duration}))
-
-  assert(typeof size === "number")
-
-  useEffect(() => {
-    if (!animationRef.current) {
-      animationRef.current = new SpinnerAnimation(size, {duration})
-    }
-
-    return () => {
-      animationRef.current?.stop()
-      animationRef.current?.release()
-    }
-  }, [size])
-
-  useEffect(() => {
-    if (animating) {
-      animationRef.current?.start()
-    } else {
-      animationRef.current?.stop()
-    }
-  }, [animating])
-
-  const getComponentStyle = (
-    source: SpinnerAnimation,
-  ): {start: ArcElementStyle, end: ArcElementStyle} => {
-    const start: ArcElementStyle = {
-      container: source.container,
-      arc: source.start,
-    }
-
-    const end: ArcElementStyle = {
-      container: source.container,
-      arc: source.end,
-      overflow: {top: size / 2},
-    }
-
-    return {start, end}
-  }
-
-  const renderArcElement = (arcStyle: ArcElementStyle): React.Element<typeof View> => {
-    const arcSize: SizeType = {width: size, height: size / 2}
-
-    const spinnerStyle = {
-      borderColor: color,
-      borderRadius: size,
-      borderWidth: strokeWidth,
-      height: size,
-      width: size,
-    }
-
-    return (
-      <Animated.View
-        style={[StyleSheet.absoluteFill, arcStyle.container, {width: size, height: size}]}
-      >
-        <View style={[styles.noOverflow, arcStyle.overflow, arcSize]}>
-          <Animated.View style={[arcStyle.arc, {width: size, height: size}]}>
-            <View style={[styles.noOverflow, arcSize]}>
-              <View style={[spinnerStyle]} />
-            </View>
-          </Animated.View>
-        </View>
-      </Animated.View>
-    )
-  }
-
-  if (!animationRef.current) {
-    return null
-  }
-
-  const evaStyle = getComponentStyle(animationRef.current?.toProps())
-
-  return (
-    <View testID={testID} style={{width: size, height: size, ...style}}>
-      {renderArcElement(evaStyle.start)}
-      {renderArcElement(evaStyle.end)}
-    </View>
-  )
-}
-
-export default withStyles(ActivityIndicator, () => ({}))

package/LottiePlayer/LottiePlayer.js

@@ -1,4 +0,0 @@
-/* @flow */
-import {Player} from "@rpcbase/lottie"
-
-export default Player

package/LottiePlayer/index.js

@@ -1,8 +0,0 @@
-/* @flow */
-import withSuspense from "../withSuspense"
-
-
-export default withSuspense(
-  () => import(/* webpackChunkName: "lottie-player" */ "./LottiePlayer"),
-  {hideLoader: true},
-)

package/Modal/HashStateModal.js

@@ -1,32 +0,0 @@
-/* @flow */
-import assert from "assert"
-
-import {useHashState} from "@rpcbase/client/hashState"
-
-
-const HashStateModal = ({hashPropName, children}) => {
-  const {hashState, serializeHashState} = useHashState()
-
-  if (children) {
-    assert(typeof children === "function", "HashStateModal children must be a function")
-  }
-
-  const show = !!hashState[hashPropName]
-
-  console.log("WOWOOW", show)
-
-  if (!show) return null
-
-  const onHide = () => {
-    serializeHashState({
-      [hashPropName]: null,
-    })
-  }
-
-  const hashProps = {}
-  hashProps[hashPropName] = hashState[hashPropName]
-
-  return children({onHide, ...hashProps})
-}
-
-export default HashStateModal

package/Modal/Modal.js

@@ -1,97 +0,0 @@
-/* @flow */
-import {forwardRef, useEffect, useRef} from "react"
-import _debounce from "lodash/debounce"
-import BSModal from "react-bootstrap/Modal"
-
-import "./modal.scss"
-
-
-const MAX_RETRIES = 256
-const DELAY_MS = 20
-
-const Modal = forwardRef(
-  (
-    {
-      show = true,
-      dark = false,
-      scrollable = true,
-      animation = true,
-      className = "",
-      children,
-      ...props
-    },
-    _ref,
-  ) => {
-    const internalRef = useRef(null)
-    const ref = _ref || internalRef
-
-    useEffect(() => {
-      if (!show) return
-
-      let attemptsCount = 0
-      let ro
-
-      const setup = () => {
-        const bodyEl = ref.current?.dialog?.querySelector(".modal-body")
-        if (!bodyEl) {
-          attemptsCount++
-          if (attemptsCount > MAX_RETRIES) {
-            throw new Error("unable to initialize after max attempts")
-          }
-          setTimeout(setup, DELAY_MS)
-          return
-        }
-
-        const checkApplyScroller = _debounce(() => {
-          const contentEl = ref.current?.dialog?.querySelector(".modal-content")
-          // TODO: this shouldn't happen, but it only happens with modalforms... investigate
-          // additionally we're eventually going to ditch the react-bootstrap modals and use our own so don't waste so much time on this
-          if (!contentEl) return
-
-          if (bodyEl.scrollHeight > bodyEl.clientHeight) {
-            if (!contentEl.classList.contains("has-scroller")) {
-              contentEl.classList.add("has-scroller")
-            }
-          } else {
-            if (contentEl.classList.contains("has-scroller")) {
-              contentEl.classList.remove("has-scroller")
-            }
-          }
-        }, DELAY_MS)
-
-        ro = new ResizeObserver((entries) => {
-          checkApplyScroller()
-        })
-
-        ro.observe(bodyEl)
-      }
-
-      setup()
-
-      return () => {
-        ro?.disconnect()
-      }
-    }, [show])
-
-    return (
-      <BSModal
-        className={cx({"is-dark": dark}, className)}
-        centered={true}
-        scrollable={scrollable}
-        animation={animation}
-        ref={ref}
-        show={show}
-        {...props}
-      >
-        {children}
-      </BSModal>
-    )
-  },
-)
-
-Modal.Dialog = BSModal.Dialog
-Modal.Header = BSModal.Header
-Modal.Body = BSModal.Body
-Modal.Footer = BSModal.Footer
-
-export default Modal

package/Modal/ModalForm/AlertBanner.js

@@ -1,83 +0,0 @@
-/* @flow */
-import {forwardRef, useImperativeHandle, useState, useEffect} from "react"
-import {useFormContext} from "react-hook-form"
-import Alert from "react-bootstrap/Alert"
-
-
-const AlertBanner = forwardRef(({modalRef, ...props}, ref) => {
-  const {formState} = useFormContext()
-
-  const [alertContent, setAlertContent] = useState(null)
-
-  // remove alert if we are done submitting and there are no dirty fields
-  useEffect(() => {
-    const hasDirtyFields = Object.keys(formState.dirtyFields).length > 0
-    if (alertContent && !formState.isSubmitting && !hasDirtyFields) {
-      setAlertContent(null)
-    }
-  }, [alertContent, formState.isSubmitting, formState.dirtyFields])
-
-  const onClickDiscardAndClose = () => {
-    modalRef.current.forceClose()
-  }
-
-  const bounce = () => {
-    requestAnimationFrame(() => {
-      const el = document.querySelector(".bouncy-alert")
-
-      el.classList.add("bounce")
-
-      setTimeout(() => {
-        requestAnimationFrame(() => {
-          el.classList.remove("bounce")
-        })
-        // WARNING: timeout must match value in css
-      }, 220)
-    })
-  }
-
-  useImperativeHandle(ref, () => ({
-    onRequestHide: () => {
-      const {isSubmitting, dirtyFields} = formState
-
-      // do not close when form submitting
-      if (isSubmitting) {
-        setAlertContent(
-          <Alert variant={"danger"} className="bouncy-alert d-flex">
-            <div>Cannot close while submitting, please do not close this page.</div>
-          </Alert>,
-        )
-
-        bounce()
-        return false
-      }
-      // when form is dirty do not close
-      else if (Object.keys(dirtyFields).length > 0) {
-        setAlertContent(
-          <Alert variant={"light"} className="bouncy-alert d-flex">
-            <div>Are you sure you want to close without saving?</div>
-            <div role="button" onClick={onClickDiscardAndClose} className="link-primary ms-2">
-              Discard and Close
-            </div>
-          </Alert>,
-        )
-
-        bounce()
-        return false
-      }
-
-      setAlertContent(null)
-      return true
-    },
-  }))
-
-  return (
-    <div className="modal-form-alerts w-100" style={{top: -70}}>
-      {alertContent}
-    </div>
-  )
-})
-
-AlertBanner.displayName = "AlertBanner"
-
-export default AlertBanner

package/Modal/ModalForm/index.js

@@ -1,193 +0,0 @@
-/* @flow */
-import debug from "debug"
-import {forwardRef, useImperativeHandle, useEffect, useState, useRef} from "react"
-import {FormProvider} from "react-hook-form"
-
-import ActivityIndicator from "../../ActivityIndicator"
-import SubmitButton from "../../SubmitButton"
-
-import Modal from "../Modal"
-
-import AlertBanner from "./AlertBanner"
-
-import "./modal-form.scss"
-
-
-const log = debug("form")
-
-
-const ExtLink = ({to}) => {
-
-  return (
-    <a target="_blank" rel="noopener noreferrer" href={to}>
-      {to}
-    </a>
-  )
-}
-
-
-const SHOW_LOADER_DELAY = 120 // ms
-
-// Bootstrap Modal integrated with hook form
-const ModalForm = forwardRef(
-  (
-    {
-      title,
-      icon,
-      footerLink,
-      submitTitle,
-      submittingTitle,
-      show,
-      onHide,
-      isLiveSubmit = false,
-      form,
-      onSubmit,
-      children,
-      ...props
-    },
-    _ref,
-  ) => {
-    const {formState, watch, handleSubmit} = form
-
-    const internalRef = useRef(null)
-    const ref = _ref || internalRef
-
-    const alertBannerRef = useRef(null)
-
-    // timeoutRef: only start displaying isBusy after a short delay
-    // to avoid screen flashing when the data loads fast enough
-    const timeoutRef = useRef(null)
-    const [isBusy, setIsBusy] = useState(false)
-
-    useImperativeHandle(ref, () => ({
-      ...ref.current,
-      forceClose: () => {
-        onHide()
-      },
-    }))
-
-    useEffect(() => {
-      // busy when either submitting or loading (async getDefaultValues)
-      if (formState.isSubmitting || formState.isLoading) {
-        timeoutRef.current = setTimeout(() => {
-          setIsBusy(true)
-        }, SHOW_LOADER_DELAY)
-      } else {
-        if (timeoutRef.current) {
-          window.clearTimeout(timeoutRef.current)
-        }
-        setIsBusy(false)
-      }
-    }, [formState.isSubmitting, formState.isLoading, setIsBusy])
-
-    useEffect(() => {
-      if (isLiveSubmit) {
-        const subscription = watch(handleSubmit(onSubmit))
-        return () => subscription.unsubscribe()
-      }
-    }, [isLiveSubmit, handleSubmit, watch])
-
-    const onHideHandler = () => {
-      log("onHideHandler")
-      if (!isLiveSubmit) {
-        onHide()
-        return
-      }
-
-      if (alertBannerRef.current.onRequestHide()) {
-        onHide()
-      }
-    }
-
-    const onClickSubmit = async() => {
-      log("onClickSubmit")
-      await handleSubmit(onSubmit)()
-    }
-
-    return (
-      <Modal
-        className="modal-form"
-        show={show}
-        onHide={onHideHandler}
-        ref={ref}
-        backdrop={isBusy ? "static" : true}
-        {...props}
-      >
-        <FormProvider {...form}>
-          <AlertBanner ref={alertBannerRef} modalRef={ref} />
-          <Modal.Header closeButton>
-            <div>
-              {icon && (
-                <img
-                  width={20}
-                  height={20}
-                  style={{marginTop: 0}}
-                  className="me-2"
-                  src={`/static/icons/${icon}.svg`}
-                />
-              )}
-              {title}
-            </div>
-          </Modal.Header>
-          <Modal.Body className="pb-3" style={{position: "relative"}}>
-            <div className={cx("modal-form-body", {"is-busy": isBusy})}>
-              <fieldset disabled={isBusy}>{children}</fieldset>
-            </div>
-
-            {isBusy && (
-              <div className="loading-overlay">
-                {isLiveSubmit && (
-                  <>
-                    <ActivityIndicator />
-                    <div className="mt-2 fw-normal">
-                      {formState.isLoading && <>Loading...</>}
-                      {formState.isSubmitting && <>{submittingTitle || "Submitting..."}</>}
-                    </div>
-                  </>
-                )}
-              </div>
-            )}
-          </Modal.Body>
-
-          {footerLink && isLiveSubmit && (
-            <Modal.Footer className="justify-content-start bg-light">
-              For more information, check out&nbsp;
-              <ExtLink to={footerLink} />
-            </Modal.Footer>
-          )}
-
-          {footerLink && !isLiveSubmit && (
-            <Modal.Footer className="p-0 justify-content-start align-items-start flex-column">
-              <div className="d-flex flex-row-reverse justify-content-start w-100 py-2">
-                <SubmitButton
-                  className="me-3"
-                  disabled={formState.isSubmitting || formState.isLoading}
-                  isLoading={formState.isSubmitting}
-                  onClick={onClickSubmit}
-                >
-                  {formState.isSubmitting ? submittingTitle || submitTitle : submitTitle}
-                </SubmitButton>
-
-                <button
-                  className="btn btn-link btn-cancel"
-                  disabled={formState.isSubmitting}
-                  onClick={onHideHandler}
-                >
-                  Cancel
-                </button>
-              </div>
-              <div className="w-100 bg-light border-top mx-0 my-0 p-3">
-                For more information, check out&nbsp;
-                <ExtLink to={footerLink} />
-              </div>
-            </Modal.Footer>
-          )}
-        </FormProvider>
-      </Modal>
-    )
-  },
-)
-
-ModalForm.displayName = "ModalForm"
-
-export default ModalForm

package/Modal/ModalForm/modal-form.scss

@@ -1,63 +0,0 @@
-@import "helpers";
-
-@keyframes bounce {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.02);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-$bounce-duration: 220ms;
-
-.modal-form {
-  .modal-content {
-    overflow: visible;
-  }
-
-  .modal-footer {
-    border-bottom-left-radius: var(--bs-modal-border-radius);
-    border-bottom-right-radius: var(--bs-modal-border-radius);
-    overflow: hidden;
-  }
-
-  .modal-form-body {
-    &.is-busy {
-      // doesn't look that good, does it
-      // filter: blur(0.5px);
-      opacity: 0.8;
-    }
-  }
-
-  .modal-form-alerts {
-    position: absolute;
-    top: -40px;
-  }
-
-  .alert {
-    border-radius: var(--bs-modal-border-radius);
-    box-shadow: var(--bs-modal-box-shadow);
-  }
-
-  .alert.alert-light {
-    // background: var(--bs-modal-bg) !important;
-    background: var(--bs-gray-200) !important;
-    border-color: $gray-700;
-    opacity: 1;
-  }
-
-  .bouncy-alert {
-    transform: scale(1);
-    transition: transform $bounce-duration ease-out;
-
-    &.bounce {
-      animation: bounce $bounce-duration;
-    }
-  }
-}

package/Modal/index.js

@@ -1,10 +0,0 @@
-/* @flow */
-import Modal from "./Modal"
-import ModalForm from "./ModalForm"
-import withHashStateModal from "./withHashStateModal"
-import HashStateModal from "./HashStateModal"
-
-
-export {ModalForm, HashStateModal, withHashStateModal}
-
-export default Modal

package/Modal/modal.scss

@@ -1,101 +0,0 @@
-@import "helpers";
-
-$navbar-height: 45px !default;
-
-.modal.is-dark {
-  $border-color: $gray-800;
-  $bg-darker: darken($gray-900, 4%);
-
-  .modal-content {
-    background-color: $gray-900;
-    color: $gray-100;
-    border-color: $black;
-  }
-
-  .modal-header {
-    color: $gray-400;
-    background-color: $bg-darker;
-    border-color: $black;
-  }
-
-  .modal-footer {
-    background-color: $bg-darker;
-    border-color: $black;
-  }
-
-  .btn-close {
-    background-color: $gray-700;
-  }
-
-  .text-secondary {
-    color: $gray-600 !important;
-  }
-
-  hr {
-    border-color: $gray-600;
-  }
-}
-
-.modal-header {
-  font-size: 1rem;
-  font-weight: 600;
-
-  &.close-top {
-    .btn-close {
-      align-self: flex-start;
-    }
-  }
-}
-
-.fullsize-modal {
-  .modal-header {
-    font-size: 15px;
-
-    // padding-top: 10px;
-    // padding-bottom: 9px;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    height: $navbar-height;
-  }
-
-  .modal-content {
-    overflow: hidden;
-    border-top: none;
-    border-bottom: none;
-  }
-
-  .modal-dialog {
-    margin-top: 0;
-    margin-bottom: 0;
-    width: 100%;
-    max-width: calc(100vw - 82px);
-    height: 100%;
-  }
-
-  .modal-header,
-  .modal-content {
-    border-radius: 0;
-  }
-
-  // @include media-breakpoint-up(lg) {
-  @media (min-width: 992px) {
-    .modal-dialog {
-      max-width: calc(100vw - 182px) !important;
-    }
-  }
-}
-
-@media (height < 600px) {
-  .modal-content.has-scroller {
-    border-color: $white !important;
-    border-radius: 0 !important;
-  }
-
-  .modal-dialog-centered {
-    height: 100% !important;
-    min-height: 100% !important;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}

package/Modal/withHashStateModal.js

@@ -1,24 +0,0 @@
-/* @flow */
-import {useHashState} from "@rpcbase/client/hashState"
-
-
-const withHashStateModal = (Component, hashPropName) => () => {
-  const {hashState, serializeHashState} = useHashState()
-
-  const show = !!hashState[hashPropName]
-
-  if (!show) return null
-
-  const onHide = () => {
-    serializeHashState({
-      [hashPropName]: null,
-    })
-  }
-
-  const hashProps = {}
-  hashProps[hashPropName] = hashState[hashPropName]
-
-  return <Component onHide={onHide} {...hashProps} />
-}
-
-export default withHashStateModal

package/SubmitButton/index.js

@@ -1,32 +0,0 @@
-/* @flow */
-import ActivityIndicator from "../ActivityIndicator"
-
-
-type Props = {
-  id?: string,
-  className: string,
-  disabled: boolean,
-  isLoading: boolean,
-  onClick: Function,
-}
-
-const SubmitButton = ({className = "", id = "btn-submit", ...props}: Props) => (
-  <button
-    id={id}
-    type="submit"
-    className={cx("submit-button btn btn-primary fw-bold d-flex flex-row align-items-center", className)}
-    disabled={props.disabled || props.isLoading}
-    onClick={props.onClick}
-  >
-    {props.isLoading && (
-      <>
-        <ActivityIndicator style={{marginRight: 6}} color="#FFF" size={15} />
-
-        {props.children}
-      </>
-    )}
-    {!props.isLoading && <>{props.children}</>}
-  </button>
-)
-
-export default SubmitButton

package/withSuspense/index.js

@@ -1,40 +0,0 @@
-/* @flow */
-import React, {Suspense, useEffect, useState} from "react"
-
-import ActivityIndicator from "../ActivityIndicator"
-
-
-const DELAY_BEFORE_LOADER = 200
-
-const withSuspense = (loadFn, opts = {hideLoader: false}) => {
-  const Component = React.lazy(loadFn)
-
-  const Loader = () => {
-    const [showLoader, setShowLoader] = useState(false)
-
-    useEffect(() => {
-      setTimeout(() => {
-        setShowLoader(true)
-      }, DELAY_BEFORE_LOADER)
-    }, [])
-
-    if (!showLoader || opts.hideLoader) return null
-
-    return (
-      <div className="d-flex flex-column h-100 justify-content-center align-items-center">
-        <div className="mb-2">Loading...</div>
-        <ActivityIndicator />
-      </div>
-    )
-  }
-
-  const Wrapper = React.forwardRef((props, ref) => (
-    <Suspense fallback={<Loader />}>
-      <Component ref={ref} {...props} />
-    </Suspense>
-  ))
-
-  return Wrapper
-}
-
-export default withSuspense