binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4693] fix: remove initial load flicker on auto-archive and auto-close automation page (#7578)

Browse source 
* [WEB-4693] fix: remove initial load flicker on auto-archive and auto-close automation page

* refactor: optimize auto-archive and auto-close status calculations using useMemo

* chore: add requested changes
This commit is contained in:
Prateek Shourya 2025-08-13 19:17:20 +05:30 • committed by GitHub
parent 34c6047d80
commit 9cf564caae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
apps/web/core/components/automation/auto-archive-automation.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useMemo, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { ArchiveRestore } from "lucide-react"; import { ArchiveRestore } from "lucide-react";
@ -48,6 +48,11 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
currentProjectDetails?.id currentProjectDetails?.id
); );
const autoArchiveStatus = useMemo(() => {
if (currentProjectDetails?.archive_in === undefined) return false;
return currentProjectDetails.archive_in !== 0;
}, [currentProjectDetails]);
return ( return (
<> <>
<SelectMonthModal <SelectMonthModal
@ -71,7 +76,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
<ToggleSwitch <ToggleSwitch
value={currentProjectDetails?.archive_in !== 0} value={autoArchiveStatus}
onChange={async () => { onChange={async () => {
if (currentProjectDetails?.archive_in === 0) { if (currentProjectDetails?.archive_in === 0) {
await handleChange({ archive_in: 1 }); await handleChange({ archive_in: 1 });
@ -94,7 +99,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
</div> </div>
{currentProjectDetails ? ( {currentProjectDetails ? (
currentProjectDetails.archive_in !== 0 && ( autoArchiveStatus && (
<div className="mx-6"> <div className="mx-6">
<div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4"> <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
<div className="w-1/2 text-sm font-medium"> <div className="w-1/2 text-sm font-medium">

11
apps/web/core/components/automation/auto-close-automation.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import React, { useState } from "react"; import React, { useMemo, useState } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
// icons // icons
@ -75,6 +75,11 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
currentProjectDetails?.id currentProjectDetails?.id
); );
const autoCloseStatus = useMemo(() => {
if (currentProjectDetails?.close_in === undefined) return false;
return currentProjectDetails.close_in !== 0;
}, [currentProjectDetails]);
return ( return (
<> <>
<SelectMonthModal <SelectMonthModal
@ -98,7 +103,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
<ToggleSwitch <ToggleSwitch
value={currentProjectDetails?.close_in !== 0} value={autoCloseStatus}
onChange={async () => { onChange={async () => {
if (currentProjectDetails?.close_in === 0) { if (currentProjectDetails?.close_in === 0) {
await handleChange({ close_in: 1, default_state: defaultState }); await handleChange({ close_in: 1, default_state: defaultState });
@ -121,7 +126,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
</div> </div>
{currentProjectDetails ? ( {currentProjectDetails ? (
currentProjectDetails.close_in !== 0 && ( autoCloseStatus && (
<div className="mx-6"> <div className="mx-6">
<div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90"> <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
<div className="flex w-full items-center justify-between gap-2 px-5 py-4"> <div className="flex w-full items-center justify-between gap-2 px-5 py-4">