Streaming events

[markoleavy]

I would need to know, in a client component layout, if it's children are rendered or if the loading component is still shown.
I'va managed to do that wrapping the loader (that by default is a server component) in a client component that dispatch an event when unmounted. Is there an easier way to achieve that?

// loading.tsx
import Loader from '@/components/various/Loader';

import LoaderEnd from './LoaderEnd';

export default function Loading() {
  return (
    <LoaderEnd>
      <Loader />
    </LoaderEnd>
  );
}

// LoaderEnd.tsx
'use client';
import React, { ReactNode, useEffect } from 'react';

const LoaderEnd: React.FC<{ children: ReactNode }> = ({ children }) => {
  useEffect(() => {
    return () => {
      dispatchEvent(new Event('page-loaded'));
    };
  });
  return children;
};
export default LoaderEnd;

// Layout.tsx
'use client';
const Layout: React.FC<Props> = ({ children }) => {
  useEffect(()=>{
    addEventListener('page-loaded', ()=> console.log('Page fully loaded'))
    return ()=>{
      removeEventListener('page-loaded', () => {});
    }
  },[])
}