adding transitions

packages/fastui-prebuilt/src/App.tsx

@@ -1,5 +1,6 @@
-import { FastUI } from 'fastui'
+import { FastUI, renderClassName } from 'fastui'
 import * as bootstrap from 'fastui-bootstrap'
+import { FC, ReactNode } from 'react'
 
 export default function App() {
   return (
@@ -10,6 +11,7 @@ export default function App() {
         customRender={bootstrap.customRender}
         NotFound={NotFound}
         Spinner={Spinner}
+        Transition={Transition}
       />
     </div>
   )
@@ -29,3 +31,10 @@ const Spinner = () => (
     <div className="spinner" />
   </div>
 )
+
+const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ children, transitioning }) => (
+  <div>
+    <div className={renderClassName({ 'transition-overlay': true, transitioning })} />
+    {children}
+  </div>
+)

packages/fastui-prebuilt/src/main.scss

@@ -8,6 +8,25 @@ $link-color: #0d6efd;  // bootstrap primary
 }
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap');
 
+.transition-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  background-color: white;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.4s ease-in-out;
+  &.transitioning {
+    opacity: 0.8;
+    pointer-events: auto;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .bg-body {
   --bs-bg-opacity: 0.6;
   backdrop-filter: blur(8px);

packages/fastui/src/Defaults.tsx

@@ -1,3 +1,12 @@
-export const DefaultSpinner = () => <div>loading...</div>
+import { FC, ReactNode } from 'react'
 
-export const DefaultNotFound = ({ url }: { url: string }) => <div>Page not found: {url}</div>
+export const DefaultSpinner: FC = () => <div>loading...</div>
+
+export const DefaultNotFound: FC<{ url: string }> = ({ url }) => <div>Page not found: {url}</div>
+
+// default here does nothing
+export const DefaultTransition: FC<{ children: ReactNode; transitioning: boolean }> = ({children}) => (
+  <div>
+    {children}
+  </div>
+)

packages/fastui/src/components/ServerLoad.tsx

@@ -2,7 +2,7 @@ import { FC, useCallback, useContext, useEffect, useState } from 'react'
 
 import { ErrorContext } from '../hooks/error'
 import { useRequest, useSSE } from '../tools'
-import { DefaultSpinner, DefaultNotFound } from '../Defaults'
+import { DefaultSpinner, DefaultNotFound, DefaultTransition } from '../Defaults'
 import { ConfigContext } from '../hooks/config'
 import { PageEvent, usePageEventListen } from '../events'
 import { EventContextProvider, useEventContext } from '../hooks/eventContext'
@@ -47,28 +47,31 @@ const ServerLoadDefer: FC<{ path: string; components: FastProps[]; loadTrigger?:
 }
 
 export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path, devReload }) => {
+  const [transitioning, setTransitioning] = useState<boolean>(false)
   const [componentProps, setComponentProps] = useState<FastProps[] | null>(null)
   const [notFoundUrl, setNotFoundUrl] = useState<string | undefined>(undefined)
 
   const url = useServerUrl(path)
   const request = useRequest()
 
   useEffect(() => {
+    setTransitioning(true)
     const promise = request({ url, expectedStatus: [200, 404] })
     promise.then(([status, data]) => {
       if (status === 200) {
         setComponentProps(data as FastProps[])
       } else {
         setNotFoundUrl(url)
       }
+      setTransitioning(false)
     })
 
     return () => {
       promise.then(() => null)
     }
   }, [url, request, devReload])
 
-  return <Render propsList={componentProps} notFoundUrl={notFoundUrl} />
+  return <Render propsList={componentProps} notFoundUrl={notFoundUrl} transitioning={transitioning} />
 }
 
 export const ServerLoadSSE: FC<{ path: string }> = ({ path }) => {
@@ -78,14 +81,19 @@ export const ServerLoadSSE: FC<{ path: string }> = ({ path }) => {
   const onMessage = useCallback((data: any) => setComponentProps(data as FastProps[]), [])
   useSSE(url, onMessage)
 
-  return <Render propsList={componentProps} />
+  return <Render propsList={componentProps} transitioning={false} />
 }
 
-const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string }> = ({ propsList, notFoundUrl }) => {
+const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string; transitioning: boolean }> = ({
+  propsList,
+  notFoundUrl,
+  transitioning,
+}) => {
   const { error } = useContext(ErrorContext)
-  const { Spinner, NotFound } = useContext(ConfigContext)
+  const { Spinner, NotFound, Transition } = useContext(ConfigContext)
   const SpinnerComp = Spinner ?? DefaultSpinner
   const NotFoundComp = NotFound ?? DefaultNotFound
+  const TransitionComp = Transition ?? DefaultTransition
 
   if (notFoundUrl) {
     return <NotFoundComp url={notFoundUrl} />
@@ -96,7 +104,11 @@ const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string }> = ({ p
       return <SpinnerComp />
     }
   } else {
-    return <AnyCompList propsList={propsList} />
+    return (
+      <TransitionComp transitioning={transitioning}>
+        <AnyCompList propsList={propsList} />
+      </TransitionComp>
+    )
   }
 }
 

packages/fastui/src/index.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 
 import type { ErrorDisplayType } from './hooks/error'
 
@@ -25,6 +25,7 @@ export interface FastUIProps {
   pathSendMode?: 'append' | 'query'
   Spinner?: FC
   NotFound?: FC<{ url: string }>
+  Transition?: FC<{ children: ReactNode; transitioning: boolean }>
   DisplayError?: ErrorDisplayType
   classNameGenerator?: ClassNameGenerator
   customRender?: CustomRender