Reduced default value for smoothButtonsTransitionMs

Author: vkruglikov

.changeset/tricky-shoes-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@vkruglikov/react-telegram-web-app': patch
+---
+
+- Reduced default value for `smoothButtonsTransitionMs`

docs/README.md

@@ -138,7 +138,7 @@ This object describe options be able to set through WebAppProvider
 | Name                         | Type      | Description                                                                                                                                                                                                                                   |
 | :--------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `smoothButtonsTransition?`   | `boolean` | When is `true`, we can smooth button transitions due to show(), hide() calls. So when you use MainButton or BackButton on multiple pages, there will be no noticeable flickering of the button during transitions **`Default Value`** `false` |
-| `smoothButtonsTransitionMs?` | `number`  | **`Default Value`** `50` Why 50? https://w3c.github.io/requestidlecallback/#why50 **`Remarks`**                                                                                                                                               |
+| `smoothButtonsTransitionMs?` | `number`  | **`Default Value`** `10` **`Remarks`**                                                                                                                                                                                                        |
 
 ---
 

src/BackButton.tsx

@@ -28,13 +28,6 @@ const BackButton = ({ onClick }: BackButtonProps): null => {
   const WebApp = useWebApp();
   const BackButton = WebApp?.BackButton;
 
-  useSmoothButtonsTransition({
-    show: BackButton?.show,
-    hide: BackButton?.hide,
-    currentShowedIdRef: system.BackButton,
-    id: buttonId,
-  });
-
   useEffect(() => {
     if (!onClick || !BackButton) {
       return;
@@ -46,6 +39,13 @@ const BackButton = ({ onClick }: BackButtonProps): null => {
     };
   }, [onClick, BackButton]);
 
+  useSmoothButtonsTransition({
+    show: BackButton?.show,
+    hide: BackButton?.hide,
+    currentShowedIdRef: system.BackButton,
+    id: buttonId,
+  });
+
   return null;
 };
 

src/core/context.ts

@@ -20,15 +20,15 @@ export type Options = {
    */
   smoothButtonsTransition?: boolean;
   /**
-   * @defaultValue `50` Why 50? https://w3c.github.io/requestidlecallback/#why50
+   * @defaultValue `10`
    * @remarks
    */
   smoothButtonsTransitionMs?: number;
 };
 
 export const DEFAULT_OPTIONS: Options = {
   smoothButtonsTransition: false,
-  smoothButtonsTransitionMs: 50,
+  smoothButtonsTransitionMs: 10,
 };
 
 export const optionsContext = createContext<Options>(DEFAULT_OPTIONS);