loading.php

A loading screen is a user interface displayed while a route is loading. This file, loading.php, defines the content shown during the loading process.

It's important to note that the loading.php file is executed before the route is fully loaded. This allows you to use PHP code for custom loading options or JavaScript to create custom loading animations. You can access PHP global variables through the Request class, such as Request::$uri, Request::$pathname, Request::$dynamicParams, Request::$params, and Request::$referer.

To create your first loading screen, add a loading.php file to the app directory. This file will serve as the loading screen for all routes unless overridden by a route-specific loading file.

Example Loading Screen

Copy and paste the following code into your loading.php file to display a simple loading animation with three bouncing circles, styled using TailwindCSS:

<div class="flex items-center justify-center min-h-screen bg-gray-100">
      <div class="flex space-x-2 animate-bounce">
          <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="w-8 h-8 bg-red-500 rounded-full"></div>
      </div>
  </div>

Nested Routes

To create a loading screen for a nested route, such as /dashboard/loading.php, place the loading file in the desired route directory. This file will then be specific to that route, allowing you to customize loading content, such as using skeleton loaders.

Note: The loading file is optional. If a loading file is created in the app/loading.php file, it will be used for all routes. However, you can override it by creating a route-specific loading file in the corresponding directory.

Customizing location loading screens

Sometimes you may want to customize the loading screen for a specific location. For example, if you want to show a loading screen for a dashboard route in a different location and not cover the entire screen, you can achieve this by adding the pp-loading-content="true" attribute to the element where you want to display the loading screen.

<div class="flex flex-col h-screen">
    <!-- Sidebar -->
    <div class="w-64 bg-gray-800 text-white flex-shrink-0">
      <!-- Add sidebar content here -->
    </div>
  
    <!-- Main content area -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- Header -->
      <header class="bg-white shadow">
        <div class="px-4 py-4 flex justify-between items-center">
          <!-- Add header content here -->
          <h1 class="text-xl font-semibold">Dashboard</h1>
          <!-- Additional header actions -->
        </div>
      </header>
  
      <!-- Main content container -->
      <main class="flex-1 overflow-y-auto p-6 bg-gray-100">
        <!-- Place your dynamic dashboard content here -->

        <div class="flex items-center justify-center min-h-full" pp-loading-content="true">

          <div class="flex space-x-2 animate-bounce">
            <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
            <div class="w-8 h-8 bg-green-500 rounded-full"></div>
            <div class="w-8 h-8 bg-red-500 rounded-full"></div>
          </div>
        </div>
      </main>
    </div>
  </div>

Customizing loading transitions

By default, the loading screen fades in and out with a duration of 250ms. You can customize the loading screen transition by adding the pp-loading-transition attribute to the element where you want to display the loading screen. The attribute value is an object with two properties: 'fadeIn' and 'fadeOut'.

<div class="flex items-center justify-center min-h-screen bg-gray-100" pp-loading-transition="{'fadeIn': 200, 'fadeOut': 200}">
      <div class="flex space-x-2 animate-bounce">
          <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="w-8 h-8 bg-red-500 rounded-full"></div>
      </div>
    </div>

Customizing the global loading screen Using PHP and JavaScript

By default, the global loading screen is displayed as a full-screen overlay with a loading animation. You can customize the global loading screen by adding PHP and JavaScript code to the loading.php file.

For example, you can add a background color to the global loading screen based on the current theme. The following code snippet demonstrates how to add a background color to the global loading screen based on the current theme:

<?php if (Request::$pathname === '/') : ?>
      <div id="global-loading" class="flex items-center justify-center w-screen h-screen">
          <span class="loading loading-ring loading-lg"></span>
      </div>
  <?php else : ?>
      <div id="global-loading" class="flex items-center justify-center min-h-screen">
          Loading...
      </div>
  <?php endif; ?>
  
  <script>
      if (store.state.themeName === 'dark') {
          let globalLoading = document.getElementById('global-loading');
          globalLoading.classList.add('bg-green-500');
      }
  </script>