adding save overlay to tables

5 files changed, 184 insertions, 61 deletions

diff --git a/frontend-components/plotly/src/utils/utils.ts b/frontend-components/plotly/src/utils/utils.ts
index 56f195e8f87..6cf205ee778 100644
--- a/frontend-components/plotly/src/utils/utils.ts
+++ b/frontend-components/plotly/src/utils/utils.ts
@@ -219,7 +219,7 @@ function loadingOverlay(message?: string, is_close?: boolean) {
         clearInterval(is_loaded);
         resolve(true);
       }
-    }, 0.1);
+    }, 0.3);
   });
 }
 
diff --git a/frontend-components/tables/src/components/Table/index.tsx b/frontend-components/tables/src/components/Table/index.tsx
index 191f0386d39..f8a6c73640d 100644
--- a/frontend-components/tables/src/components/Table/index.tsx
+++ b/frontend-components/tables/src/components/Table/index.tsx
@@ -483,6 +483,10 @@ export default function Table({
         <div className="smh:hidden flex max-h-[68px] overflow-x-auto bg-white/70 dark:bg-grey-900/70 backdrop-filter backdrop-blur z-20 bottom-0 left-0 w-full gap-10 justify-between py-4 px-4 text-sm">
           <div className="flex items-center gap-10">
             <DialogPrimitive.Root>
+              <div id="loading" className="saving">
+                <div id="loading_text" className="loading_text"></div>
+                <div id="loader" className="loader"></div>
+              </div>
               <DialogPrimitive.Trigger className="_btn">
                 Settings
               </DialogPrimitive.Trigger>
diff --git a/frontend-components/tables/src/index.css b/frontend-components/tables/src/index.css
index 6ab0af246c9..fd9cfbb4b04 100644
--- a/frontend-components/tables/src/index.css
+++ b/frontend-components/tables/src/index.css
@@ -125,3 +125,50 @@ table thead th {
   position: sticky;
   top: 0;
 }
+
+.saving {
+  position: absolute;
+  z-index: 9999999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 100px;
+  width: 200px;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(250, 250, 250, 0.5);
+  font-size: 0.9em;
+  border-radius: 20px;
+  animation: popup 0.3s ease-in-out;
+}
+
+.saving.show {
+  display: flex;
+}
+.loader {
+  position: relative;
+  bottom: 0px;
+  right: -5px;
+  border: 4px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 4px solid #00acff;
+  width: 20px;
+  height: 20px;
+  animation: spin 1.5s linear infinite;
+  opacity: 1;
+}
+
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/frontend-components/tables/src/utils/utils.ts b/frontend-components/tables/src/utils/utils.ts
index e042cb9de82..96870a2913e 100644
--- a/frontend-components/tables/src/utils/utils.ts
+++ b/frontend-components/tables/src/utils/utils.ts
@@ -27,6 +27,33 @@ export function includesDateNames(column: string) {
   );
 }
 
+function loadingOverlay(message?: string, is_close?: boolean) {
+  const loading = window.document.getElementById("loading") as HTMLElement;
+  const loading_text = window.document.getElementById(
+    "loading_text"
+  ) as HTMLElement;
+  return new Promise((resolve) => {
+    if (is_close) {
+      loading.classList.remove("show");
+    } else {
+      // @ts-ignore
+      loading_text.innerHTML = message;
+      loading.classList.add("show");
+    }
+
+    let is_loaded = setInterval(function () {
+      if (
+        is_close
+          ? !loading.classList.contains("show")
+          : loading.classList.contains("show")
+      ) {
+        clearInterval(is_loaded);
+        resolve(true);
+      }
+    }, 0.1);
+  });
+}
+
 export function isEqual(a: any, b: any) {
   if (a === b) return true;
   if (a == null || b == null) return false;
@@ -142,9 +169,17 @@ export const saveToFile = (
     link.click();
     document.body.removeChild(link);
   }
+
+  return new Promise((resolve) => {
+    resolve(true);
+  });
 };
 
-export const downloadData = (type: "csv" | "xlsx", columns: any, data: any) => {
+export async function downloadData(
+  type: "csv" | "xlsx",
+  columns: any,
+  data: any
+) {
   const headers = columns;
   const rows = data.map((row: any) =>
     headers.map((column: any) => row[column])
@@ -156,20 +191,44 @@ export const downloadData = (type: "csv" | "xlsx", columns: any, data: any) => {
     const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
     const filename = `${window.title}.csv`;
 
-    getNewFileHandle({
-      filename: filename,
-    }).then((fileHandle) => {
+    try {
+      let fileHandle = await getNewFileHandle({
+        filename: filename,
+      });
+      let ext: string = "csv";
+      if (fileHandle !== null) {
+        // @ts-ignore
+        ext = fileHandle.name.split(".").pop();
+      }
+      await loadingOverlay(`Saving ${ext.toUpperCase()}`);
       // @ts-ignore
-      saveToFile(blob, filename, fileHandle);
-    });
+      non_blocking(async function () {
+        // @ts-ignore
+        saveToFile(blob, filename, fileHandle).then(async function () {
+          await new Promise((resolve) => setTimeout(resolve, 1500));
+          await loadingOverlay("", true);
+        });
+      }, 2)();
+    } catch (error) {
+      console.error(error);
+    }
+
     return;
   }
 
   const wb = utils.book_new();
   const ws = utils.aoa_to_sheet(csvData);
   utils.book_append_sheet(wb, ws, "Sheet1");
-  writeFile(wb, `${window.title}.xlsx`);
-};
+  await loadingOverlay(`Saving XLSX`);
+  non_blocking(async function () {
+    // @ts-ignore
+    // timeout to allow loading overlay to show
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    writeFile(wb, `${window.title}.xlsx`);
+    await loadingOverlay("", true);
+  }, 2)();
+}
 
 export const downloadImage = (id: string) => {
   const table = document.getElementById(id);
@@ -185,3 +244,16 @@ export const downloadImage = (id: string) => {
     });
   });
 };
+
+
+export const non_blocking = (func: Function, delay: number) => {
+  let timeout: number;
+  return function () {
+    // @ts-ignore
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), delay);
+  };
+};
+
diff --git a/openbb_terminal/core/plots/table.html b/openbb_terminal/core/plots/table.html
index 5a520e43ca3..a9cabbaed31 100644
--- a/openbb_terminal/core/plots/table.html
+++ b/openbb_terminal/core/plots/table.html
@@ -79,47 +79,47 @@
       }
     </script>
     <script type="module" crossorigin>
-function sy(e,t){for(var r=0;r<t.length;r++){const n=t[r];if(typeof n!="string"&&!Array.isArray(n)){for(const i in n)if(i!=="default"&&!(i in e)){const o=Object.getOwnPropertyDescriptor(n,i);o&&Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:()=>n[i]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))n(i);new MutationObserver(i=>{for(const o of i)if(o.type==="childList")for(const a of o.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&n(a)}).observe(document,{childList:!0,subtree:!0});function r(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerPolicy&&(o.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?o.credentials="include":i.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function n(i){if(i.ep)return;i.ep=!0;const o=r(i);fetch(i.href,o)}})();function x1(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var wa={},ly={get exports(){return wa},set exports(e){wa=e}},Va={};/*
+function uy(e,t){for(var r=0;r<t.length;r++){const n=t[r];if(typeof n!="string"&&!Array.isArray(n)){for(const i in n)if(i!=="default"&&!(i in e)){const o=Object.getOwnPropertyDescriptor(n,i);o&&Object.defineProperty(e,i,o.get?o:{enumerable:!0,get:()=>n[i]})}}}return Object.freeze(Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}))}(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))n(i);new MutationObserver(i=>{for(const o of i)if(o.type==="childList")for(const a of o.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&n(a)}).observe(document,{childList:!0,subtree:!0});function r(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerPolicy&&(o.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?o.credentials="include":i.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function n(i){if(i.ep)return;i.ep=!0;const o=r(i);fetch(i.href,o)}})();function y1(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var wa={},cy={get exports(){return wa},set exports(e){wa=e}},Va={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var ch=Object.getOwnPropertySymbols,uy=Object.prototype.hasOwnProperty,cy=Object.prototype.propertyIsEnumerable;function fy(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function dy(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;var n=Object.getOwnPropertyNames(t).map(function(o){return t[o]});if(n.join("")!=="0123456789")return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach(function(o){i[o]=o}),Object.keys(Object.assign({},i)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}var w1=dy()?Object.assign:function(e,t){for(var r,n=fy(e),i,o=1;o<arguments.length;o++){r=Object(arguments[o]);for(var a in r)uy.call(r,a)&&(n[a]=r[a]);if(ch){i=ch(r);for(var s=0;s<i.length;s++)cy.call(r,i[s])&&(n[i[s]]=r[i[s]])}}return n},v={},hy={get exports(){return v},set exports(e){v=e}},be={};/** @license React v17.0.2
+*/var fh=Object.getOwnPropertySymbols,fy=Object.prototype.hasOwnProperty,dy=Object.prototype.propertyIsEnumerable;function hy(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function py(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;var n=Object.getOwnPropertyNames(t).map(function(o){return t[o]});if(n.join("")!=="0123456789")return!1;var i={};return"abcdefghijklmnopqrst".split("").forEach(function(o){i[o]=o}),Object.keys(Object.assign({},i)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}var E1=py()?Object.assign:function(e,t){for(var r,n=hy(e),i,o=1;o<arguments.length;o++){r=Object(arguments[o]);for(var a in r)fy.call(r,a)&&(n[a]=r[a]);if(fh){i=fh(r);for(var s=0;s<i.length;s++)dy.call(r,i[s])&&(n[i[s]]=r[i[s]])}}return n},v={},gy={get exports(){return v},set exports(e){v=e}},be={};/** @license React v17.0.2
  * react.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var s0=w1,ho=60103,y1=60106;be.Fragment=60107;be.StrictMode=60108;be.Profiler=60114;var E1=60109,_1=60110,S1=60112;be.Suspense=60113;var T1=60115,C1=60116;if(typeof Symbol=="function"&&Symbol.for){var pr=Symbol.for;ho=pr("react.element"),y1=pr("react.portal"),be.Fragment=pr("react.fragment"),be.StrictMode=pr("react.strict_mode"),be.Profiler=pr("react.profiler"),E1=pr("react.provider"),_1=pr("react.context"),S1=pr("react.forward_ref"),be.Suspense=pr("react.suspense"),T1=pr("react.memo"),C1=pr("react.lazy")}var fh=typeof Symbol=="function"&&Symbol.iterator;function py(e){return e===null||typeof e!="object"?null:(e=fh&&e[fh]||e["@@iterator"],typeof e=="function"?e:null)}function Wa(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var A1={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},R1={};function po(e,t,r){this.props=e,this.context=t,this.refs=R1,this.updater=r||A1}po.prototype.isReactComponent={};po.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error(Wa(85));this.updater.enqueueSetState(this,e,t,"setState")};po.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function O1(){}O1.prototype=po.prototype;function l0(e,t,r){this.props=e,this.context=t,this.refs=R1,this.updater=r||A1}var u0=l0.prototype=new O1;u0.constructor=l0;s0(u0,po.prototype);u0.isPureReactComponent=!0;var c0={current:null},F1=Object.prototype.hasOwnProperty,D1={key:!0,ref:!0,__self:!0,__source:!0};function P1(e,t,r){var n,i={},o=null,a=null;if(t!=null)for(n in t.ref!==void 0&&(a=t.ref),t.key!==void 0&&(o=""+t.key),t)F1.call(t,n)&&!D1.hasOwnProperty(n)&&(i[n]=t[n]);var s=arguments.length-2;if(s===1)i.children=r;else if(1<s){for(var l=Array(s),u=0;u<s;u++)l[u]=arguments[u+2];i.children=l}if(e&&e.defaultProps)for(n in s=e.defaultProps,s)i[n]===void 0&&(i[n]=s[n]);return{$$typeof:ho,type:e,key:o,ref:a,props:i,_owner:c0.current}}function gy(e,t){return{$$typeof:ho,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}function f0(e){return typeof e=="object"&&e!==null&&e.$$typeof===ho}function my(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(r){return t[r]})}var dh=/\/+/g;function Uu(e,t){return typeof e=="object"&&e!==null&&e.key!=null?my(""+e.key):t.toString(36)}function Hs(e,t,r,n,i){var o=typeof e;(o==="undefined"||o==="boolean")&&(e=null);var a=!1;if(e===null)a=!0;else switch(o){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case ho:case y1:a=!0}}if(a)return a=e,i=i(a),e=n===""?"."+Uu(a,0):n,Array.isArray(i)?(r="",e!=null&&(r=e.replace(dh,"$&/")+"/"),Hs(i,t,r,"",function(u){return u})):i!=null&&(f0(i)&&(i=gy(i,r+(!i.key||a&&a.key===i.key?"":(""+i.key).replace(dh,"$&/")+"/")+e)),t.push(i)),1;if(a=0,n=n===""?".":n+":",Array.isArray(e))for(var s=0;s<e.length;s++){o=e[s];var l=n+Uu(o,s);a+=Hs(o,t,r,l,i)}else if(l=py(e),typeof l=="function")for(e=l.call(e),s=0;!(o=e.next()).done;)o=o.value,l=n+Uu(o,s++),a+=Hs(o,t,r,l,i);else if(o==="object")throw t=""+e,Error(Wa(31,t==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":t));return a}function as(e,t,r){if(e==null)return e;var n=[],i=0;return Hs(e,n,"","",function(o){return t.call(r,o,i++)}),n}function vy(e){if(e._status===-1){var t=e._result;t=t(),e._status=0,e._result=t,t.then(function(r){e._status===0&&(r=r.default,e._status=1,e._result=r)},function(r){e._status===0&&(e._status=2,e._result=r)})}if(e._status===1)return e._result;throw e._result}var I1={current:null};function nn(){var e=I1.current;if(e===null)throw Error(Wa(321));return e}var xy={ReactCurrentDispatcher:I1,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:c0,IsSomeRendererActing:{current:!1},assign:s0};be.Children={map:as,forEach:function(e,t,r){as(e,function(){t.apply(this,arguments)},r)},count:function(e){var t=0;return as(e,function(){t++}),t},toArray:function(e){return as(e,function(t){return t})||[]},only:function(e){if(!f0(e))throw Error(Wa(143));return e}};be.Component=po;be.PureComponent=l0;be.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=xy;be.cloneElement=function(e,t,r){if(e==null)throw Error(Wa(267,e));var n=s0({},e.props),i=e.key,o=e.ref,a=e._owner;if(t!=null){if(t.ref!==void 0&&(o=t.ref,a=c0.current),t.key!==void 0&&(i=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(l in t)F1.call(t,l)&&!D1.hasOwnProperty(l)&&(n[l]=t[l]===void 0&&s!==void 0?s[l]:t[l])}var l=arguments.length-2;if(l===1)n.children=r;else if(1<l){s=Array(l);for(var u=0;u<l;u++)s[u]=arguments[u+2];n.children=s}return{$$typeof:ho,type:e.type,key:i,ref:o,props:n,_owner:a}};be.createContext=function(e,t){return t===void 0&&(t=null),e={$$typeof:_1,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null},e.Provider={$$typeof:E1,_context:e},e.Consumer=e};be.createElement=P1;be.createFactory=function(e){var t=P1.bind(null,e);return t.type=e,t};be.createRef=function(){return{current:null}};be.forwardRef=function(e){return{$$typeof:S1,render:e}};be.isValidElement=f0;be.lazy=function(e){return{$$typeof:C1,_payload:{_status:-1,_result:e},_init:vy}};be.memo=function(e,t){return{$$typeof:T1,type:e,compare:t===void 0?null:t}};be.useCallback=function(e,t){return nn().useCallback(e,t)};be.useContext=function(e,t){return nn().useContext(e,t)};be.useDebugValue=function(){};be.useEffect=function(e,t){return nn().useEffect(e,t)};be.useImperativeHandle=function(e,t,r){return nn().useImperativeHandle(e,t,r)};be.useLayoutEffect=function(e,t){return nn().useLayoutEffect(e,t)};be.useMemo=function(e,t){return nn().useMemo(e,t)};be.useReducer=function(e,t,r){return nn().useReducer(e,t,r)};be.useRef=function(e){return nn().useRef(e)};be.useState=function(e){return nn().useState(e)};be.version="17.0.2";(function(e){e.exports=be})(hy);const nr=x1(v),wy=sy({__proto__:null,default:nr},[v]);/** @license React v17.0.2
+ */var l0=E1,ho=60103,_1=60106;be.Fragment=60107;be.StrictMode=60108;be.Profiler=60114;var S1=60109,T1=60110,C1=60112;be.Suspense=60113;var A1=60115,R1=60116;if(typeof Symbol=="function"&&Symbol.for){var pr=Symbol.for;ho=pr("react.element"),_1=pr("react.portal"),be.Fragment=pr("react.fragment"),be.StrictMode=pr("react.strict_mode"),be.Profiler=pr("react.profiler"),S1=pr("react.provider"),T1=pr("react.context"),C1=pr("react.forward_ref"),be.Suspense=pr("react.suspense"),A1=pr("react.memo"),R1=pr("react.lazy")}var dh=typeof Symbol=="function"&&Symbol.iterator;function my(e){return e===null||typeof e!="object"?null:(e=dh&&e[dh]||e["@@iterator"],typeof e=="function"?e:null)}function Wa(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var O1={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},F1={};function po(e,t,r){this.props=e,this.context=t,this.refs=F1,this.updater=r||O1}po.prototype.isReactComponent={};po.prototype.setState=function(e,t){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error(Wa(85));this.updater.enqueueSetState(this,e,t,"setState")};po.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function D1(){}D1.prototype=po.prototype;function u0(e,t,r){this.props=e,this.context=t,this.refs=F1,this.updater=r||O1}var c0=u0.prototype=new D1;c0.constructor=u0;l0(c0,po.prototype);c0.isPureReactComponent=!0;var f0={current:null},P1=Object.prototype.hasOwnProperty,I1={key:!0,ref:!0,__self:!0,__source:!0};function b1(e,t,r){var n,i={},o=null,a=null;if(t!=null)for(n in t.ref!==void 0&&(a=t.ref),t.key!==void 0&&(o=""+t.key),t)P1.call(t,n)&&!I1.hasOwnProperty(n)&&(i[n]=t[n]);var s=arguments.length-2;if(s===1)i.children=r;else if(1<s){for(var l=Array(s),u=0;u<s;u++)l[u]=arguments[u+2];i.children=l}if(e&&e.defaultProps)for(n in s=e.defaultProps,s)i[n]===void 0&&(i[n]=s[n]);return{$$typeof:ho,type:e,key:o,ref:a,props:i,_owner:f0.current}}function vy(e,t){return{$$typeof:ho,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}function d0(e){return typeof e=="object"&&e!==null&&e.$$typeof===ho}function xy(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(r){return t[r]})}var hh=/\/+/g;function Hu(e,t){return typeof e=="object"&&e!==null&&e.key!=null?xy(""+e.key):t.toString(36)}function Vs(e,t,r,n,i){var o=typeof e;(o==="undefined"||o==="boolean")&&(e=null);var a=!1;if(e===null)a=!0;else switch(o){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case ho:case _1:a=!0}}if(a)return a=e,i=i(a),e=n===""?"."+Hu(a,0):n,Array.isArray(i)?(r="",e!=null&&(r=e.replace(hh,"$&/")+"/"),Vs(i,t,r,"",function(u){return u})):i!=null&&(d0(i)&&(i=vy(i,r+(!i.key||a&&a.key===i.key?"":(""+i.key).replace(hh,"$&/")+"/")+e)),t.push(i)),1;if(a=0,n=n===""?".":n+":",Array.isArray(e))for(var s=0;s<e.length;s++){o=e[s];var l=n+Hu(o,s);a+=Vs(o,t,r,l,i)}else if(l=my(e),typeof l=="function")for(e=l.call(e),s=0;!(o=e.next()).done;)o=o.value,l=n+Hu(o,s++),a+=Vs(o,t,r,l,i);else if(o==="object")throw t=""+e,Error(Wa(31,t==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":t));return a}function as(e,t,r){if(e==null)return e;var n=[],i=0;return Vs(e,n,"","",function(o){return t.call(r,o,i++)}),n}function wy(e){if(e._status===-1){var t=e._result;t=t(),e._status=0,e._result=t,t.then(function(r){e._status===0&&(r=r.default,e._status=1,e._result=r)},function(r){e._status===0&&(e._status=2,e._result=r)})}if(e._status===1)return e._result;throw e._result}var k1={current:null};function nn(){var e=k1.current;if(e===null)throw Error(Wa(321));return e}var yy={ReactCurrentDispatcher:k1,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:f0,IsSomeRendererActing:{current:!1},assign:l0};be.Children={map:as,forEach:function(e,t,r){as(e,function(){t.apply(this,arguments)},r)},count:function(e){var t=0;return as(e,function(){t++}),t},toArray:function(e){return as(e,function(t){return t})||[]},only:function(e){if(!d0(e))throw Error(Wa(143));return e}};be.Component=po;be.PureComponent=u0;be.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=yy;be.cloneElement=function(e,t,r){if(e==null)throw Error(Wa(267,e));var n=l0({},e.props),i=e.key,o=e.ref,a=e._owner;if(t!=null){if(t.ref!==void 0&&(o=t.ref,a=f0.current),t.key!==void 0&&(i=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(l in t)P1.call(t,l)&&!I1.hasOwnProperty(l)&&(n[l]=t[l]===void 0&&s!==void 0?s[l]:t[l])}var l=arguments.length-2;if(l===1)n.children=r;else if(1<l){s=Array(l);for(var u=0;u<l;u++)s[u]=arguments[u+2];n.children=s}return{$$typeof:ho,type:e.type,key:i,ref:o,props:n,_owner:a}};be.createContext=function(e,t){return t===void 0&&(t=null),e={$$typeof:T1,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null},e.Provider={$$typeof:S1,_context:e},e.Consumer=e};be.createElement=b1;be.createFactory=function(e){var t=b1.bind(null,e);return t.type=e,t};be.createRef=function(){return{current:null}};be.forwardRef=function(e){return{$$typeof:C1,render:e}};be.isValidElement=d0;be.lazy=function(e){return{$$typeof:R1,_payload:{_status:-1,_result:e},_init:wy}};be.memo=function(e,t){return{$$typeof:A1,type:e,compare:t===void 0?null:t}};be.useCallback=function(e,t){return nn().useCallback(e,t)};be.useContext=function(e,t){return nn().useContext(e,t)};be.useDebugValue=function(){};be.useEffect=function(e,t){return nn().useEffect(e,t)};be.useImperativeHandle=function(e,t,r){return nn().useImperativeHandle(e,t,r)};be.useLayoutEffect=function(e,t){return nn().useLayoutEffect(e,t)};be.useMemo=function(e,t){return nn().useMemo(e,t)};be.useReducer=function(e,t,r){return nn().useReducer(e,t,r)};be.useRef=function(e){return nn().useRef(e)};be.useState=function(e){return nn().useState(e)};be.version="17.0.2";(function(e){e.exports=be})(gy);const nr=y1(v),Ey=uy({__proto__:null,default:nr},[v]);/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var yy=v,b1=60103;Va.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var hh=Symbol.for;b1=hh("react.element"),Va.Fragment=hh("react.fragment")}var Ey=yy.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,_y=Object.prototype.hasOwnProperty,Sy={key:!0,ref:!0,__self:!0,__source:!0};function k1(e,t,r){var n,i={},o=null,a=null;r!==void 0&&(o=""+r),t.key!==void 0&&(o=""+t.key),t.ref!==void 0&&(a=t.ref);for(n in t)_y.call(t,n)&&!Sy.hasOwnProperty(n)&&(i[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps,t)i[n]===void 0&&(i[n]=t[n]);return{$$typeof:b1,type:e,key:o,ref:a,props:i,_owner:Ey.current}}Va.jsx=k1;Va.jsxs=k1;(function(e){e.exports=Va})(ly);const $1=wa.Fragment,Z=wa.jsx,Te=wa.jsxs;var Jr={},Ty={get exports(){return Jr},set exports(e){Jr=e}},dr={},Uc={},Cy={get exports(){return Uc},set exports(e){Uc=e}},N1={};/** @license React v0.20.2
+ */var _y=v,$1=60103;Va.Fragment=60107;if(typeof Symbol=="function"&&Symbol.for){var ph=Symbol.for;$1=ph("react.element"),Va.Fragment=ph("react.fragment")}var Sy=_y.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Ty=Object.prototype.hasOwnProperty,Cy={key:!0,ref:!0,__self:!0,__source:!0};function N1(e,t,r){var n,i={},o=null,a=null;r!==void 0&&(o=""+r),t.key!==void 0&&(o=""+t.key),t.ref!==void 0&&(a=t.ref);for(n in t)Ty.call(t,n)&&!Cy.hasOwnProperty(n)&&(i[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps,t)i[n]===void 0&&(i[n]=t[n]);return{$$typeof:$1,type:e,key:o,ref:a,props:i,_owner:Sy.current}}Va.jsx=N1;Va.jsxs=N1;(function(e){e.exports=Va})(cy);const M1=wa.Fragment,q=wa.jsx,Te=wa.jsxs;var Jr={},Ay={get exports(){return Jr},set exports(e){Jr=e}},dr={},Hc={},Ry={get exports(){return Hc},set exports(e){Hc=e}},L1={};/** @license React v0.20.2
  * scheduler.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */(function(e){var t,r,n,i;if(typeof performance=="object"&&typeof performance.now=="function"){var o=performance;e.unstable_now=function(){return o.now()}}else{var a=Date,s=a.now();e.unstable_now=function(){return a.now()-s}}if(typeof window>"u"||typeof MessageChannel!="function"){var l=null,u=null,c=function(){if(l!==null)try{var Q=e.unstable_now();l(!0,Q),l=null}catch(F){throw setTimeout(c,0),F}};t=function(Q){l!==null?setTimeout(t,0,Q):(l=Q,setTimeout(c,0))},r=function(Q,F){u=setTimeout(Q,F)},n=function(){clearTimeout(u)},e.unstable_shouldYield=function(){return!1},i=e.unstable_forceFrameRate=function(){}}else{var f=window.setTimeout,d=window.clearTimeout;if(typeof console<"u"){var h=window.cancelAnimationFrame;typeof window.requestAnimationFrame!="function"&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"),typeof h!="function"&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills")}var m=!1,p=null,g=-1,x=5,w=0;e.unstable_shouldYield=function(){return e.unstable_now()>=w},i=function(){},e.unstable_forceFrameRate=function(Q){0>Q||125<Q?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):x=0<Q?Math.floor(1e3/Q):5};var y=new MessageChannel,_=y.port2;y.port1.onmessage=function(){if(p!==null){var Q=e.unstable_now();w=Q+x;try{p(!0,Q)?_.postMessage(null):(m=!1,p=null)}catch(F){throw _.postMessage(null),F}}else m=!1},t=function(Q){p=Q,m||(m=!0,_.postMessage(null))},r=function(Q,F){g=f(function(){Q(e.unstable_now())},F)},n=function(){d(g),g=-1}}function k(Q,F){var M=Q.length;Q.push(F);e:for(;;){var b=M-1>>>1,T=Q[b];if(T!==void 0&&0<A(T,F))Q[b]=F,Q[M]=T,M=b;else break e}}function N(Q){return Q=Q[0],Q===void 0?null:Q}function S(Q){var F=Q[0];if(F!==void 0){var M=Q.pop();if(M!==F){Q[0]=M;e:for(var b=0,T=Q.length;b<T;){var B=2*(b+1)-1,H=Q[B],q=B+1,ee=Q[q];if(H!==void 0&&0>A(H,M))ee!==void 0&&0>A(ee,H)?(Q[b]=ee,Q[q]=M,b=q):(Q[b]=H,Q[B]=M,b=B);else if(ee!==void 0&&0>A(ee,M))Q[b]=ee,Q[q]=M,b=q;else break e}}return F}return null}function A(Q,F){var M=Q.sortIndex-F.sortIndex;return M!==0?M:Q.id-F.id}var R=[],L=[],V=1,U=null,W=3,Y=!1,re=!1,ye=!1;function ge(Q){for(var F=N(L);F!==null;){if(F.callback===null)S(L);else if(F.startTime<=Q)S(L),F.sortIndex=F.expirationTime,k(R,F);else break;F=N(L)}}function Se(Q){if(ye=!1,ge(Q),!re)if(N(R)!==null)re=!0,t(ie);else{var F=N(L);F!==null&&r(Se,F.startTime-Q)}}function ie(Q,F){re=!1,ye&&(ye=!1,n()),Y=!0;var M=W;try{for(ge(F),U=N(R);U!==null&&(!(U.expirationTime>F)||Q&&!e.unstable_shouldYield());){var b=U.callback;if(typeof b=="function"){U.callback=null,W=U.priorityLevel;var T=b(U.expirationTime<=F);F=e.unstable_now(),typeof T=="function"?U.callback=T:U===N(R)&&S(R),ge(F)}else S(R);U=N(R)}if(U!==null)var B=!0;else{var H=N(L);H!==null&&r(Se,H.startTime-F),B=!1}return B}finally{U=null,W=M,Y=!1}}var we=i;e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(Q){Q.callback=null},e.unstable_continueExecution=function(){re||Y||(re=!0,t(ie))},e.unstable_getCurrentPriorityLevel=function(){return W},e.unstable_getFirstCallbackNode=function(){return N(R)},e.unstable_next=function(Q){switch(W){case 1:case 2:case 3:var F=3;break;default:F=W}var M=W;W=F;try{return Q()}finally{W=M}},e.unstable_pauseExecution=function(){},e.unstable_requestPaint=we,e.unstable_runWithPriority=function(Q,F){switch(Q){case 1:case 2:case 3:case 4:case 5:break;default:Q=3}var M=W;W=Q;try{return F()}finally{W=M}},e.unstable_scheduleCallback=function(Q,F,M){var b=e.unstable_now();switch(typeof M=="object"&&M!==null?(M=M.delay,M=typeof M=="number"&&0<M?b+M:b):M=b,Q){case 1:var T=-1;break;case 2:T=250;break;case 5:T=1073741823;break;case 4:T=1e4;break;default:T=5e3}return T=M+T,Q={id:V++,callback:F,priorityLevel:Q,startTime:M,expirationTime:T,sortIndex:-1},M>b?(Q.sortIndex=M,k(L,Q),N(R)===null&&Q===N(L)&&(ye?n():ye=!0,r(Se,M-b))):(Q.sortIndex=T,k(R,Q),re||Y||(re=!0,t(ie))),Q},e.unstable_wrapCallback=function(Q){var F=W;return function(){var M=W;W=F;try{return Q.apply(this,arguments)}finally{W=M}}}})(N1);(function(e){e.exports=N1})(Cy);/** @license React v17.0.2
+ */(function(e){var t,r,n,i;if(typeof performance=="object"&&typeof performance.now=="function"){var o=performance;e.unstable_now=function(){return o.now()}}else{var a=Date,s=a.now();e.unstable_now=function(){return a.now()-s}}if(typeof window>"u"||typeof MessageChannel!="function"){var l=null,u=null,c=function(){if(l!==null)try{var Z=e.unstable_now();l(!0,Z),l=null}catch(F){throw setTimeout(c,0),F}};t=function(Z){l!==null?setTimeout(t,0,Z):(l=Z,setTimeout(c,0))},r=function(Z,F){u=setTimeout(Z,F)},n=function(){clearTimeout(u)},e.unstable_shouldYield=function(){return!1},i=e.unstable_forceFrameRate=function(){}}else{var f=window.setTimeout,d=window.clearTimeout;if(typeof console<"u"){var h=window.cancelAnimationFrame;typeof window.requestAnimationFrame!="function"&&console.error("This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills"),typeof h!="function"&&console.error("This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills")}var m=!1,p=null,g=-1,x=5,w=0;e.unstable_shouldYield=function(){return e.unstable_now()>=w},i=function(){},e.unstable_forceFrameRate=function(Z){0>Z||125<Z?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):x=0<Z?Math.floor(1e3/Z):5};var y=new MessageChannel,_=y.port2;y.port1.onmessage=function(){if(p!==null){var Z=e.unstable_now();w=Z+x;try{p(!0,Z)?_.postMessage(null):(m=!1,p=null)}catch(F){throw _.postMessage(null),F}}else m=!1},t=function(Z){p=Z,m||(m=!0,_.postMessage(null))},r=function(Z,F){g=f(function(){Z(e.unstable_now())},F)},n=function(){d(g),g=-1}}function k(Z,F){var M=Z.length;Z.push(F);e:for(;;){var b=M-1>>>1,T=Z[b];if(T!==void 0&&0<A(T,F))Z[b]=F,Z[M]=T,M=b;else break e}}function N(Z){return Z=Z[0],Z===void 0?null:Z}function S(Z){var F=Z[0];if(F!==void 0){var M=Z.pop();if(M!==F){Z[0]=M;e:for(var b=0,T=Z.length;b<T;){var B=2*(b+1)-1,H=Z[B],Q=B+1,ee=Z[Q];if(H!==void 0&&0>A(H,M))ee!==void 0&&0>A(ee,H)?(Z[b]=ee,Z[Q]=M,b=Q):(Z[b]=H,Z[B]=M,b=B);else if(ee!==void 0&&0>A(ee,M))Z[b]=ee,Z[Q]=M,b=Q;else break e}}return F}return null}function A(Z,F){var M=Z.sortIndex-F.sortIndex;return M!==0?M:Z.id-F.id}var R=[],L=[],V=1,U=null,W=3,Y=!1,re=!1,ye=!1;function ge(Z){for(var F=N(L);F!==null;){if(F.callback===null)S(L);else if(F.startTime<=Z)S(L),F.sortIndex=F.expirationTime,k(R,F);else break;F=N(L)}}function Se(Z){if(ye=!1,ge(Z),!re)if(N(R)!==null)re=!0,t(ie);else{var F=N(L);F!==null&&r(Se,F.startTime-Z)}}function ie(Z,F){re=!1,ye&&(ye=!1,n()),Y=!0;var M=W;try{for(ge(F),U=N(R);U!==null&&(!(U.expirationTime>F)||Z&&!e.unstable_shouldYield());){var b=U.callback;if(typeof b=="function"){U.callback=null,W=U.priorityLevel;var T=b(U.expirationTime<=F);F=e.unstable_now(),typeof T=="function"?U.callback=T:U===N(R)&&S(R),ge(F)}else S(R);U=N(R)}if(U!==null)var B=!0;else{var H=N(L);H!==null&&r(Se,H.startTime-F),B=!1}return B}finally{U=null,W=M,Y=!1}}var we=i;e.unstable_IdlePriority=5,e.unstable_ImmediatePriority=1,e.unstable_LowPriority=4,e.unstable_NormalPriority=3,e.unstable_Profiling=null,e.unstable_UserBlockingPriority=2,e.unstable_cancelCallback=function(Z){Z.callback=null},e.unstable_continueExecution=function(){re||Y||(re=!0,t(ie))},e.unstable_getCurrentPriorityLevel=function(){return W},e.unstable_getFirstCallbackNode=function(){return N(R)},e.unstable_next=function(Z){switch(W){case 1:case 2:case 3:var F=3;break;default:F=W}var M=W;W=F;try{return Z()}finally{W=M}},e.unstable_pauseExecution=function(){},e.unstable_requestPaint=we,e.unstable_runWithPriority=function(Z,F){switch(Z){case 1:case 2:case 3:case 4:case 5:break;default:Z=3}var M=W;W=Z;try{return F()}finally{W=M}},e.unstable_scheduleCallback=function(Z,F,M){var b=e.unstable_now();switch(typeof M=="object"&&M!==null?(M=M.delay,M=typeof M=="number"&&0<M?b+M:b):M=b,Z){case 1:var T=-1;break;case 2:T=250;break;case 5:T=1073741823;break;case 4:T=1e4;break;default:T=5e3}return T=M+T,Z={id:V++,callback:F,priorityLevel:Z,startTime:M,expirationTime:T,sortIndex:-1},M>b?(Z.sortIndex=M,k(L,Z),N(R)===null&&Z===N(L)&&(ye?n():ye=!0,r(Se,M-b))):(Z.sortIndex=T,k(R,Z),re||Y||(re=!0,t(ie))),Z},e.unstable_wrapCallback=function(Z){var F=W;return function(){var M=W;W=F;try{return Z.apply(this,arguments)}finally{W=M}}}})(L1);(function(e){e.exports=L1})(Ry);/** @license React v17.0.2
  * react-dom.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Xl=v,Xe=w1,ft=Uc;function se(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}if(!Xl)throw Error(se(227));var M1=new Set,ya={};function ui(e,t){io(e,t),io(e+"Capture",t)}function io(e,t){for(ya[e]=t,e=0;e<t.length;e++)M1.add(t[e])}var en=!(typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"),Ay=/^[:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD][:A-Z_a-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02FF\u0370-\u037D\u037F-\u1FFF\u200C-\u200D\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD\-.0-9\u00B7\u0300-\u036F\u203F-\u2040]*$/,ph=Object.prototype.hasOwnProperty,gh={},mh={};function Ry(e){return ph.call(mh,e)?!0:ph.call(gh,e)?!1:Ay.test(e)?mh[e]=!0:(gh[e]=!0,!1)}function Oy(e,t,r,n){if(r!==null&&r.type===0)return!1;switch(typeof t){case"function":case"symbol":return!0;case"boolean":return n?!1:r!==null?!r.acceptsBooleans:(e=e.toLowerCase().slice(0,5),e!=="data-"&&e!=="aria-");default:return!1}}function Fy(e,t,r,n){if(t===null||typeof t>"u"||Oy(e,t,r,n))return!0;if(n)return!1;if(r!==null)switch(r.type){case 3:return!t;case 4:return t===!1;case 5:return isNaN(t);case 6:return isNaN(t)||1>t}return!1}function Nt(e,t,r,n,i,o,a){this.acceptsBooleans=t===2||t===3||t===4,this.attributeName=n,this.attributeNamespace=i,this.mustUseProperty=r,this.propertyName=e,this.type=t,this.sanitizeURL=o,this.removeEmptyString=a}var yt={};"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style".split(" ").forEach(function(e){yt[e]=new Nt(e,0,!1,e,null,!1,!1)});[["acceptCharset","accept-charset"],["className","class"],["htmlFor","for"],["httpEquiv","http-equiv"]].forEach(function(e){var t=e[0];yt[t]=new Nt(t,1,!1,e[1],null,!1,!1)});["contentEditable","draggable","spellCheck","value"].forEach(function(e){yt[e]=new Nt(e,2,!1,e.toLowerCase(),null,!1,!1)});["autoReverse","externalResourcesRequired","focusable","preserveAlpha"].forEach(function(e){yt[e]=new Nt(e,2,!1,e,null,!1,!1)});"allowFullScreen async autoFocus autoPlay controls default defer disabled disablePictureInPicture disableRemotePlayback formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope".split(" ").forEach(function(e){yt[e]=new Nt(e,3,!1,e.toLowerCase(),null,!1,!1)});["checked","multiple","muted","selected"].forEach(function(e){yt[e]=new Nt(e,3,!0,e,null,!1,!1)});["capture","download"].forEach(function(e){yt[e]=new Nt(e,4,!1,e,null,!1,!1)});["cols","rows","size","span"].forEach(function(e){yt[e]=new Nt(e,6,!1,e,null,!1,!1)});["rowSpan","start"].forEach(function(e){yt[e]=new Nt(e,5,!1,e.toLowerCase(),null,!1,!1)});var d0=/[\-:]([a-z])/g;function h0(e){return e[1].toUpperCase()}"accent-height