Feature/throttle updates and responsive bug (#241) (#243)

* Fixing throttle updates and resposnive issue

* Updating package and changelog with locales

* Small refactor

* Updating changelog

Author: shannonhochkins

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 5.0.8
+
+### @hakit/components
+
+- BUGFIX - Breakpoints - A previous release caused the breakpoint logic to break, there was also another related bug where if breakpoints were provided to the ThemeProvider, it would cause a recursive update as there was a mis-match between the internal and input objects - fixes [issue](https://github.com/shannonhochkins/ha-component-kit/issues/239)
+- MediaPlayerCard, ControlSliderCircular, ClimateControls, RangeSlider - all now update with the trailing edge first as these also had a similar problem to the useEntity hook mentioned below.
+
+
+### @hakit/core
+- useEntity - issue with throttle controls acting like a delay, it will now taking the trailing/leading edge and initial updates will be immediate, default throttle time dropped from 150ms to 25ms, other components will also see a speed up in updates in the UI with this change, thanks for reporting @maumi - fixes [issue](https://github.com/shannonhochkins/ha-component-kit/issues/242)
+- useWeather, useLogs - also updated with incorrect throttle options
+
 # 5.0.7
 
 ### @hakit/components

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@hakit/components",
   "type": "module",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "private": false,
   "keywords": [
     "react",
@@ -69,7 +69,7 @@
     "@emotion/react": ">=11.x.x",
     "@emotion/styled": ">=11.x",
     "@fullcalendar/react": ">=6.x.x",
-    "@hakit/core": "^5.0.7",
+    "@hakit/core": "^5.0.8",
     "@mui/material": "^6.3.0",
     "@use-gesture/react": ">=10.x",
     "autolinker": ">=4.x",

packages/components/package.json

@@ -278,9 +278,16 @@ function InternalMediaPlayerCard({
     calculatePercentageViewed(media_duration, media_position);
   }, [media_position, calculatePercentageViewed, media_duration]);
 
-  const debounceUpdateClock = useThrottledCallback((value: number) => {
-    updateClock(value);
-  }, 20);
+  const debounceUpdateClock = useThrottledCallback(
+    (value: number) => {
+      updateClock(value);
+    },
+    20,
+    {
+      trailing: true,
+      leading: true,
+    },
+  );
 
   // noinspection JSVoidFunctionReturnValueUsed
   const bindProgress = useGesture({

packages/components/src/Cards/MediaPlayerCard/index.tsx

@@ -448,15 +448,29 @@ function InternalControlSliderCircular({
     [dual, localHigh, localLow, max, min],
   );
 
-  const triggerOnChangeApplied = useDebouncedCallback((updatedValue: number, type: ActiveSlider) => {
-    if (typeof onChangeApplied !== "function") return;
-    onChangeApplied(updatedValue, type);
-  }, 100);
-
-  const triggerOnChange = useThrottledCallback((updatedValue: number, type: ActiveSlider) => {
-    if (typeof onChange !== "function") return;
-    onChange(updatedValue, type);
-  }, 20);
+  const triggerOnChangeApplied = useDebouncedCallback(
+    (updatedValue: number, type: ActiveSlider) => {
+      if (typeof onChangeApplied !== "function") return;
+      onChangeApplied(updatedValue, type);
+    },
+    100,
+    {
+      trailing: true,
+      leading: true,
+    },
+  );
+
+  const triggerOnChange = useThrottledCallback(
+    (updatedValue: number, type: ActiveSlider) => {
+      if (typeof onChange !== "function") return;
+      onChange(updatedValue, type);
+    },
+    20,
+    {
+      trailing: true,
+      leading: true,
+    },
+  );
 
   const bind = useGesture(
     {

packages/components/src/Shared/ControlSliderCircular/index.tsx

@@ -177,7 +177,10 @@ export function ClimateControlSlider({ entity: _entity, targetTempStep, showCurr
     [_targetTemperature, entity],
   );
 
-  const _debouncedCallService = useDebouncedCallback((target: Target) => _callService(target), 1000);
+  const _debouncedCallService = useDebouncedCallback((target: Target) => _callService(target), 1000, {
+    trailing: true,
+    leading: true,
+  });
 
   const _handleButton = useCallback(
     (target: Target, step: number) => {

packages/components/src/Shared/Entity/Climate/ClimateControls/ClimateControlSlider.tsx

@@ -55,7 +55,10 @@ export function ClimateHumiditySlider({ entity: _entity, targetTempStep, showCur
     [entity.service],
   );
 
-  const _debouncedCallService = useDebouncedCallback((target: number) => _callService(target), 1000);
+  const _debouncedCallService = useDebouncedCallback((target: number) => _callService(target), 1000, {
+    leading: true,
+    trailing: true,
+  });
 
   const _valueChanged = useCallback(
     (value: number) => {

packages/components/src/Shared/Entity/Climate/ClimateControls/ClimateHumiditySlider.tsx

@@ -230,12 +230,19 @@ function InternalRangeSlider({
 
   const callType = debounceType === "debounce" ? useDebouncedCallback : useThrottledCallback;
 
-  const debouncedOnChange = callType((event: React.ChangeEvent<HTMLInputElement>) => {
-    if (typeof onChangeComplete === "function") {
-      onChangeComplete(event.target.valueAsNumber, event);
-    }
-    setActive(false);
-  }, debounceThrottleValue);
+  const debouncedOnChange = callType(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (typeof onChangeComplete === "function") {
+        onChangeComplete(event.target.valueAsNumber, event);
+      }
+      setActive(false);
+    },
+    debounceThrottleValue,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
 
   return (
     <RangeSliderParent

packages/components/src/Shared/RangeSlider/index.tsx

@@ -35,9 +35,16 @@ export function ThemeControls() {
   const [dark, setDark] = useState(darkMode);
   const [c, setContrastThreshold] = useState(contrastThreshold);
 
-  const debouncedOnChange = useDebouncedCallback((_theme: ThemeStore["theme"]) => {
-    setTheme(_theme);
-  }, 50);
+  const debouncedOnChange = useDebouncedCallback(
+    (_theme: ThemeStore["theme"]) => {
+      setTheme(_theme);
+    },
+    50,
+    {
+      trailing: true,
+      leading: true,
+    },
+  );
 
   useEffect(() => {
     debouncedOnChange({

packages/components/src/ThemeProvider/ThemeControls.tsx

@@ -14,11 +14,4 @@ export const DEFAULT_THEME_OPTIONS = {
   saturation: 60,
   lightness: 54,
   contrastThreshold: 65,
-  breakpoints: {
-    xxs: 600,
-    xs: 900,
-    sm: 1200,
-    md: 1536,
-    lg: 1700,
-  },
 } as const;