loading.php

System File

The loading file defines the UI displayed while a route is fetching. It executes before the route is fully resolved, allowing for high-performance transition states.

Pre-Render Execution

Because this file runs before the route loads, you have access to the global Request class to customize the experience.

Request::$uri Request::$pathname Request::$dynamicParams Request::$referer

Quick Start

Create a global loading screen by adding a file to your root app directory.

app / loading.php

Path Resolution Strategy

The system uses a hierarchical fallback mechanism to find the most specific loading screen for the current route.

Exact Match

Checks for a loading.php inside the exact route directory.

/dashboard/users/loading.php

Parent Match

Traverses up the tree. If you are in users, it checks the dashboard folder next.

/dashboard/loading.php

Global Fallback

If no specific files are found, it defaults to the root application loader.

/app/loading.php

Directory Hierarchy Example

app/

loading.php // Global Fallback

dashboard/

loading.php // Used for /dashboard/*

users/

loading.php // Specific to /dashboard/users

Basic Implementation

A simple Tailwind CSS bouncing dots animation suitable for a global loader.


                <div class="flex items-center justify-center min-h-screen bg-background">

                  <div class="flex space-x-2 animate-bounce">

                    <div class="w-8 h-8 bg-primary/80 rounded-full"></div>

                    <div class="w-8 h-8 bg-primary/60 rounded-full"></div>

                    <div class="w-8 h-8 bg-primary/40 rounded-full"></div>

                  </div>

                </div>

Partial UI Loading

You often don't want to replace the entire screen (including Sidebar/Header) when navigating. Use the pp-loading-content="true" attribute to target a specific container.

When this attribute is present, the loading.php content is injected inside this element, rather than replacing the body.

dashboard-layout.php


                    <div class="flex h-screen">

                      <Sidebar />

                      <div class="flex-1 flex flex-col">

                        <Header />

                        

                        

                        <main 

                          class="flex-1 p-6"

                          pp-loading-content="true"

                        >

                          <?php echo $content; ?>

                        </main>

                      </div>

                    </div>

Custom Transitions

Control the animation timing using the pp-loading-transition attribute.

Configuration Object

Pass a JSON object to define duration in milliseconds.

fadeIn: How long the loader takes to appear.
fadeOut: How long the loader takes to disappear after content is ready.


                            <div 

                              class="min-h-screen ..."

                              pp-loading-transition="{'fadeIn': 100, 'fadeOut': 300}"

                            >

                              <!-- Loader Content -->

                            </div>

Conditional Logic

Since loading.php is a PHP file, you can render different loaders based on server logic or client state.


                 if (Request::$pathname === '/') : ?>

                  

                  <div id="global-loading" class="h-screen w-screen flex items-center justify-center">

                    <Logo class="animate-pulse" />

                  </div>

                 else : ?>

                  

                  <div id="global-loading" class="h-full w-full flex items-center justify-center">

                    <Spinner size="sm" />

                  </div>

                 endif; ?>

                

                <script>

                  // Client-side theme adaptation

                  if (store.state.themeName === 'dark') {<br />
                    document.getElementById('global-loading').classList.add('bg-slate-900');<br />
                  }

                </script>