Why opened page with AdminLTE looks broken?

Hello,
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like brokwnot all styles were loaded,

Please try enter to login into adminarea by url :

https://bi-currencies.my-demo-apps.tk/admin/currencies

credentials are in Login form

and pages looks like : https://prnt.sc/TCjBh0SefUMO

But if to refresh page with “CTRL+R” pages looks ok, in dark mode.

Any ideas why so and how that can be fixed?

Thanks!

Do you have Redis or some cache enabled? If so maybe try without the cache and see if the styles load the first time.

2 Likes

This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?

Does your webpack config do css compilation and then load many libraries? Maybe play with the order of these or temporarily disable them 1 by 1 to see if any are causing this issue.

Regards,
Steve

More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with “bootstrap”: “^4.6.0”).
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )

I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home

I see this problem of other browsers of my Kubuntu 20 too.

Maybe problem is that that I use too different templates, but actually I use different layouts, so in


app/Http/Middleware/HandleInertiaRequests.php :

    public function rootView(Request $request)
    {
        if ($request->segment(1) == 'user') {
            return 'layouts/user';
        }
        if ($request->segment(1) == 'admin') {
            return 'layouts/adminlte'; // TODO
        }

        return 'layouts/frontend'; // Current request is front-end
    }

This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">

    <link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@300;400;500;700;900&amp;display=swap"
          rel="stylesheet">

    <!-- Styles -->


    @routes

    <!-- Scripts -->

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="/css/theme.css">

    <script src="/vendors/@popperjs/popper.min.js"></script>
    <script src="/vendors/bootstrap/bootstrap.min.js"></script>
    <script src="/vendors/is/is.min.js"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
    <script src="/vendors/fontawesome/all.min.js"></script>

    <script src="{{ mix('js/app.js') }}" defer></script>

</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
@inertia
</body>
</html>

and admin template resources/views/layouts/adminlte.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>

        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">

        <!-- Styles -->

        <link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
        <link rel="stylesheet" href="/css/fontawesome_all.min.css">

        <link rel="stylesheet" href="/css/adminlte.min.css">
        <link rel="stylesheet" href="/css/admin_custom.css">

        @routes

        <!-- Scripts -->
        <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script src="/js/Chart.bundle.js"></script>

        <script src="/js/OverlayScrollbars.min.js"></script>

        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
        @inertia
    </body>
</html>

1 common resources/js/app.js :

require('./bootstrap');

window.Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: false,
    didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
    }
})

require('@fortawesome/fontawesome-free/js/all.min.js');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import mitt from 'mitt';
window.emitter = mitt();


const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

import Multiselect from '@vueform/multiselect'

import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";


const app =  createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .component('inertia-link', Link)
            .component('Paginate', Paginate)
            .component('file-upload', VueUploadComponent)

            .mixin({ methods: { route } })
            .component('multiselect', Multiselect)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :

        \Artisan::call('config:cache');
        \Artisan::call('route:cache');
        \Artisan::call('cache:clear');
        \Artisan::call('route:cache');
        \Artisan::call('route:clear');
        \Artisan::call('view:clear');
        \Artisan::call('clear-compiled');

but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?

  1. I tried one of prior versions before I added frontend part : it has the same issue with first time page opened and broken design.
    So I suppose that is some different problem, but not conflict with custom frontend design.

  2. I uploaded the project at public https://github.com/sergeynilov/BiCurrencies repository.
    Could you please install it and take a look ?
    Just common laravel app with common install steps.

Thanks!