inegicomponente/src/Layouts/Layout.js

Componentes de visualizacion 2023 - Graficas

import React, {memo, useEffect, Suspense, useState, useRef} from 'react';
import {useStoreGlobal} from '../Stores/Global';
import { useShallow } from 'zustand/react/shallow';
import Titulo from '../Componentes/Titulo';

const Layout = ({initConfig}) => {
    const refContainer = useRef(null);    
    const _configuracion = useStoreGlobal(useShallow((state) => state._configuracion));
    const _inicializa = useStoreGlobal((state) => state._inicializa);
    const [showComponente, setShowComponente] = useState(false);
    initConfig.refContainer = refContainer;

    useEffect(() => {
        if(Object.keys(_configuracion).length === 0){
            setTimeout(() => {
                _inicializa(initConfig);
                setShowComponente(true);

            },1000)
        }
        // Desmonta componente
        return () => {
            _inicializa({}, []);
            setShowComponente(false);
        }
       
    },[initConfig])

    return ( 
        (!showComponente)? <Suspense>Cargando!!!</Suspense> :         
        <section id={_configuracion.contenedorId} className="border" ref={refContainer}> 
            <Titulo config={_configuracion}/>
        </section>
    )
}
export default memo(Layout);