mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 10:27:49 +00:00
perf: fix render cycle in useBranding and conditional polling
- Remove isFullscreen from useBranding useEffect deps to prevent re-render loop (requestFullscreen changes isFullscreen which re-triggers the effect); use ref guard instead - Make AdminBroadcasts 5s polling conditional: only poll when there are active broadcasts (queued/in_progress/cancelling)
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useEffect } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { useAuthStore } from '@/store/auth';
|
import { useAuthStore } from '@/store/auth';
|
||||||
import { useTelegramSDK, setCachedFullscreenEnabled } from '@/hooks/useTelegramSDK';
|
import { useTelegramSDK, setCachedFullscreenEnabled } from '@/hooks/useTelegramSDK';
|
||||||
@@ -14,8 +14,8 @@ const FALLBACK_NAME = import.meta.env.VITE_APP_NAME || 'Cabinet';
|
|||||||
const FALLBACK_LOGO = import.meta.env.VITE_APP_LOGO || 'V';
|
const FALLBACK_LOGO = import.meta.env.VITE_APP_LOGO || 'V';
|
||||||
|
|
||||||
export function useBranding() {
|
export function useBranding() {
|
||||||
const { isAuthenticated } = useAuthStore();
|
const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
|
||||||
const { isFullscreen, isTelegramWebApp, requestFullscreen, isMobile } = useTelegramSDK();
|
const { isTelegramWebApp, requestFullscreen, isMobile } = useTelegramSDK();
|
||||||
|
|
||||||
// Branding data
|
// Branding data
|
||||||
const { data: branding } = useQuery({
|
const { data: branding } = useQuery({
|
||||||
@@ -62,13 +62,16 @@ export function useBranding() {
|
|||||||
staleTime: 60000,
|
staleTime: 60000,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const fullscreenRequestedRef = useRef(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!fullscreenSetting || !isTelegramWebApp) return;
|
if (!fullscreenSetting || !isTelegramWebApp) return;
|
||||||
setCachedFullscreenEnabled(fullscreenSetting.enabled);
|
setCachedFullscreenEnabled(fullscreenSetting.enabled);
|
||||||
if (fullscreenSetting.enabled && !isFullscreen && isMobile) {
|
if (fullscreenSetting.enabled && isMobile && !fullscreenRequestedRef.current) {
|
||||||
|
fullscreenRequestedRef.current = true;
|
||||||
requestFullscreen();
|
requestFullscreen();
|
||||||
}
|
}
|
||||||
}, [fullscreenSetting, isTelegramWebApp, isFullscreen, requestFullscreen, isMobile]);
|
}, [fullscreenSetting, isTelegramWebApp, requestFullscreen, isMobile]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
appName,
|
appName,
|
||||||
|
|||||||
@@ -137,7 +137,13 @@ export default function AdminBroadcasts() {
|
|||||||
const { data, isLoading, refetch } = useQuery({
|
const { data, isLoading, refetch } = useQuery({
|
||||||
queryKey: ['admin', 'broadcasts', 'list', page],
|
queryKey: ['admin', 'broadcasts', 'list', page],
|
||||||
queryFn: () => adminBroadcastsApi.list(limit, page * limit),
|
queryFn: () => adminBroadcastsApi.list(limit, page * limit),
|
||||||
refetchInterval: 5000, // Auto refresh every 5s
|
refetchInterval: (query) => {
|
||||||
|
const items = query.state.data?.items;
|
||||||
|
const hasActive = items?.some((b: { status: string }) =>
|
||||||
|
['queued', 'in_progress', 'cancelling'].includes(b.status),
|
||||||
|
);
|
||||||
|
return hasActive ? 5000 : false;
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const broadcasts = data?.items || [];
|
const broadcasts = data?.items || [];
|
||||||
|
|||||||
Reference in New Issue
Block a user