mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): no desmontar la pantalla en cada recarga en segundo plano

Browse Source 
Las 11 pantallas con listado/detalle bloqueaban TODO su render con
"if (loading || !data) return <Cargando/>". Como useAsync pone loading=true en
cada reload (no solo en la carga inicial), cualquier accion dentro de un
DetailPopup abierto que dispara un reload del padre (agregar subtarea, agregar
dependencia, guardar comentario, etc.) desmontaba momentaneamente TODA la
pantalla -y con ella el popup y su estado interno (pestaña activa)-, que volvia
a montarse desde cero con sus valores iniciales.

Sintoma reportado: al agregar una subtarea (Enter o boton "Nuevo"), el popup de
la actividad volvia a la pestaña Info en vez de quedarse en Subtareas.

Fix: la guarda ahora es solo "if (!data)" -bloquea unicamente la carga
inicial, cuando todavia no hay nada que mostrar-. Las recargas subsiguientes
actualizan el contenido en el sitio sin desmontar nada.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-09-03 11:30:20 -05:00
parent 1e6e7fecdd
commit b172a8f087
11 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AttachmentsPanel.jsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { Button } from './Button.jsx';
export function AttachmentsPanel({ entityType, entityId }) {
const { t, openDialog } = useUi();
const runAction = useAction();
const { data: files, loading, reload } = useAsync(() => listAttachments(entityType, entityId), [entityType, entityId]);
const { data: files, reload } = useAsync(() => listAttachments(entityType, entityId), [entityType, entityId]);
const inputRef = useRef(null);
async function handleFile(e) {
@@ -33,7 +33,7 @@ export function AttachmentsPanel({ entityType, entityId }) {
});
}
if (loading || !files) return <div className="text-muted">{t('common_loading')}</div>;
if (!files) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/components/CommentsPanel.jsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { Button } from './Button.jsx';
export function CommentsPanel({ entityType, entityId }) {
const { t } = useUi();
const runAction = useAction();
const { data: comments, loading, reload } = useAsync(() => listComments(entityType, entityId), [entityType, entityId]);
const { data: comments, reload } = useAsync(() => listComments(entityType, entityId), [entityType, entityId]);
const [message, setMessage] = useState('');
async function send() {
@@ -20,7 +20,7 @@ export function CommentsPanel({ entityType, entityId }) {
});
}
if (loading || !comments) return <div className="text-muted">{t('common_loading')}</div>;
if (!comments) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Configuracion/CatalogEditor.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ function emptyForm(fields) {
export function CatalogEditor({ catalogKey, fields, title }) {
const { t, openDialog, pushToast } = useUi();
const runAction = useAction();
const { data: items, loading, reload } = useAsync(() => listCatalog(catalogKey), [catalogKey]);
const { data: items, reload } = useAsync(() => listCatalog(catalogKey), [catalogKey]);
const [editing, setEditing] = useState(false);
const [selected, setSelected] = useState(null);
const [form, setForm] = useState(emptyForm(fields));
@@ -75,7 +75,7 @@ export function CatalogEditor({ catalogKey, fields, title }) {
: undefined,
}));
if (loading || !items) return <div className="text-muted">{t('common_loading')}</div>;
if (!items) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Dashboard/DashboardPage.jsx
+2 -2
View File
@@ -8,9 +8,9 @@ import { ProgressBar, DueBadge } from '../../components/StatusBadge.jsx';
export default function DashboardPage() {
const { t } = useUi();
const navigate = useNavigate();
const { data, loading } = useAsync(getSummary, []);
const { data } = useAsync(getSummary, []);
if (loading || !data) return <div className="text-muted">{t('common_loading')}</div>;
if (!data) return <div className="text-muted">{t('common_loading')}</div>;
const { kpis, myActivities, projectsByStatus } = data;
return (
frontend/src/pages/Organizacion/DepartmentsPanel.jsx
+2 -2
View File
@@ -20,7 +20,7 @@ function flatten(nodes, acc = []) {
export default function DepartmentsPanel() {
const { t, openDialog, pushToast } = useUi();
const runAction = useAction();
const { data: tree, loading, reload } = useAsync(listDepartments, []);
const { data: tree, reload } = useAsync(listDepartments, []);
const [selected, setSelected] = useState(null);
const [editing, setEditing] = useState(false);
const [form, setForm] = useState({ name: '', parentId: '' });
@@ -71,7 +71,7 @@ export default function DepartmentsPanel() {
});
}
if (loading || !tree) return <div className="text-muted">{t('common_loading')}</div>;
if (!tree) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Organizacion/UsersPanel.jsx
+2 -2
View File
@@ -22,7 +22,7 @@ const EMPTY_FORM = { name: '', email: '', roleId: '', departmentId: '', position
export default function UsersPanel() {
const { t, pushToast } = useUi();
const runAction = useAction();
const { data: users, loading, reload } = useAsync(listUsers, []);
const { data: users, reload } = useAsync(listUsers, []);
const { data: roles } = useAsync(listRoles, []);
const { data: deptTree } = useAsync(listDepartments, []);
@@ -78,7 +78,7 @@ export default function UsersPanel() {
) },
];
if (loading || !users) return <div className="text-muted">{t('common_loading')}</div>;
if (!users) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Proyectos/ProjectActivitiesTab.jsx
+2 -2
View File
@@ -20,7 +20,7 @@ const EMPTY_FORM = { name: '', description: '', responsibleUserId: '', priorityI
export default function ProjectActivitiesTab({ projectId }) {
const { t, pushToast } = useUi();
const runAction = useAction();
const { data: activities, loading, reload } = useAsync(() => listActivitiesByProject(projectId), [projectId]);
const { data: activities, reload } = useAsync(() => listActivitiesByProject(projectId), [projectId]);
const { data: priorities } = useAsync(() => listCatalog('priorities'), []);
const { data: statuses } = useAsync(() => listCatalog('activity-statuses'), []);
const { data: users } = useAsync(listUsers, []);
@@ -70,7 +70,7 @@ export default function ProjectActivitiesTab({ projectId }) {
{ key: 'progress_pct', label: t('activity_progress'), render: (r) => <div style={{ width: 100 }}><ProgressBar value={Number(r.progress_pct)} /></div> },
];
if (loading || !activities) return <div className="text-muted">{t('common_loading')}</div>;
if (!activities) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Proyectos/ProjectCalendarTab.jsx
+2 -2
View File
@@ -20,7 +20,7 @@ function buildGrid(year, month) {
export default function ProjectCalendarTab({ projectId }) {
const { t } = useUi();
const { data: activities, loading } = useAsync(() => listActivitiesByProject(projectId), [projectId]);
const { data: activities } = useAsync(() => listActivitiesByProject(projectId), [projectId]);
const [cursor, setCursor] = useState(() => { const n = new Date(); return new Date(n.getFullYear(), n.getMonth(), 1); });
const cells = useMemo(() => buildGrid(cursor.getFullYear(), cursor.getMonth()), [cursor]);
@@ -35,7 +35,7 @@ export default function ProjectCalendarTab({ projectId }) {
return map;
}, [activities]);
if (loading || !activities) return <div className="text-muted">{t('common_loading')}</div>;
if (!activities) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Proyectos/ProjectGanttTab.jsx
+2 -2
View File
@@ -4,9 +4,9 @@ import { getGantt } from '../../services/projects.js';
export default function ProjectGanttTab({ projectId }) {
const { t } = useUi();
const { data: items, loading } = useAsync(() => getGantt(projectId), [projectId]);
const { data: items } = useAsync(() => getGantt(projectId), [projectId]);
if (loading || !items) return <div className="text-muted">{t('common_loading')}</div>;
if (!items) return <div className="text-muted">{t('common_loading')}</div>;
const withDates = items.filter((i) => i.startDate && i.dueDate);
if (withDates.length === 0) return <div className="empty-state">{t('common_empty')}</div>;
frontend/src/pages/Proyectos/ProyectoDetallePage.jsx
+2 -2
View File
@@ -21,9 +21,9 @@ export default function ProyectoDetallePage() {
const navigate = useNavigate();
const [tab, setTab] = useState('info');
const { data: project, loading, reload } = useAsync(() => getProject(projectId), [projectId]);
const { data: project, reload } = useAsync(() => getProject(projectId), [projectId]);
if (loading || !project) return <div className="text-muted">{t('common_loading')}</div>;
if (!project) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>
frontend/src/pages/Proyectos/ProyectosPage.jsx
+2 -2
View File
@@ -32,7 +32,7 @@ export default function ProyectosPage() {
const navigate = useNavigate();
const runAction = useAction();
const { data: projects, loading, reload } = useAsync(listProjects, []);
const { data: projects, reload } = useAsync(listProjects, []);
const { data: priorities } = useAsync(() => listCatalog('priorities'), []);
const { data: statuses } = useAsync(() => listCatalog('project-statuses'), []);
const { data: types } = useAsync(() => listCatalog('project-types'), []);
@@ -75,7 +75,7 @@ export default function ProyectosPage() {
{ key: 'risk_level', label: t('project_risk'), render: (r) => <Badge color={RISK_COLOR[r.risk_level]}>{t(`risk_${r.risk_level}`)}</Badge> },
];
if (loading || !projects) return <div className="text-muted">{t('common_loading')}</div>;
if (!projects) return <div className="text-muted">{t('common_loading')}</div>;
return (
<div>