App Shell

Catalyst offers an app shell, which serves as a wrapper around your page code, enabling you to perform common operations required for all pages. You can access the app shell inside the src/js/containers/App directory under the src folder.

All your pages will be rendered in this app shell. It will be the parent component for all your apps.

Outlet

In React Router, an Outlet is a placeholder component used within a parent component to render child routes. It acts as the destination for nested route components, allowing for dynamic rendering of content based on the current URL path. Refer doc https://reactrouter.com/en/main/components/outlet for more information.

Catalyst uses React Router under the hood for routing. You can refer to the React Router documentation for more detailed information on routing concepts and APIs.

App Shell Benefits

🚀 Fast Loading

Navigation and shell load instantly, only content changes

🔄 Persistent UI

Header, navigation, and footer remain stable during navigation

⚡ Better UX

Users see immediate feedback and familiar interface

App Shell Implementation

This example demonstrates how Catalyst implements the App Shell pattern to provide a fast, reliable loading experience with persistent navigation and content loading.

Catalyst

App Shell loads instantly while content loads in background

Footer content - Always visible in App Shell

Code Example

App Shell Structure (src/js/containers/App/index.js)

import React from "react"
import { Outlet } from "@tata1mg/router"

const App = () => {
    return (
        <div className="app-shell">
            <header className="app-header">
                <div className="logo">Catalyst</div>
                <nav className="navigation">
                    {/* Navigation links */}
                </nav>
            </header>
            
            <main className="app-content">
                <Outlet />
            </main>
            
            <footer className="app-footer">
                {/* Footer content */}
            </footer>
        </div>
    )
}

App.serverSideFunction = ({store, req, res}) => {
    // Runs on every page request
    return new Promise((resolve) => resolve())
}

export default App

Page Component (src/js/pages/Home/Home.js)

import React from "react"

const Home = () => {
    return (
        <div>
            <h1>Welcome to Home Page</h1>
            <p>This content is rendered inside the App Shell</p>
        </div>
    )
}

Home.serverFetcher = async () => {
    // Fetch data for this specific page
    const data = await fetch('/api/home-data')
    return data.json()
}

export default Home

Outlet​