inertiajs / progress Goto Github PK

Hi @reinink, I use inertia/progress in my Laravel Inertia Svelte Demo. But, when I move from first menu to another menu (Home, About, Contact) using mouse click I expect that progress indicator run but it doesn't.

I already setup the inertia progress based on inertiajs documentation.

1. Install npm install @inertiajs/progress
2. Initialize inertia progress in app.js. Here's the code.

import { App } from '@inertiajs/inertia-svelte';
import { InertiaProgress } from '@inertiajs/progress';

InertiaProgress.init();

const el = document.getElementById('app');

new App({
    target: el,
    props: {
        initialPage: JSON.parse(el.dataset.page),
        resolveComponent: name => import(`./Pages/${name}.svelte`)
    }
});

I'm using:

• @inertiajs/inertia: ^0.7.0
• @inertia/inertia-svelte: ^0.5.2
• @inertia/progress: ^0.2.3

Screen record attach below.

Is there any step that I'm missing?

Thanks.

Versions:

• @inertiajs/inertia version:0.9.4
• @inertiajs/inertia-vue3 version: 0.4.7

Describe the problem:

I'm using $inertia.reload() in my mounted hook to fetch data that takes a bit longer to retrieve (3rd party API). However, doing this no longer shows the progress indicators, via InertiaProgress.

Steps to reproduce:

1. Navigate to a page, with standard injected props.
2. In your components mounted() lifecycle hook, make another request using the only option.

this.$inertia.reload({
      only: ['someApiData', 'someMoreApiData',],
})

Is there a simple way to adjust the lineWidth of the bar? Im trying to make it thicker.

InertiaProgress.init({
  delay: 0,
  color: '#6875F5',
  includeCSS: true,
  showSpinner: false,
})

the docs didnt mentioned about the width;

Basically using queueMicrotask() is the more "correct" way to add "next tick" behaviour, than using Promise.resolve() as we are right now. Browser support isn't as good though, so maybe we create our own "nextTick()" utility that has a fallback?

Background: here.
Helpful reference: vuejs/vue#10865

Getting the error:
vendor.js:653 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com 'nonce-gNubTa9xLIALXt6z6cKEdnsNwMUGMx6d'". Either the 'unsafe-inline' keyword, a hash ('sha256-UTjtaAWWTyzFjRKbltk24jHijlTbP20C1GUYaWPqg7E='), or a nonce ('nonce-...') is required to enable inline execution.

This is caused by the inline styles injected from this plugin.

Can support for a nonce be added? unsafe-inline is not allowed in my application.

Do you know why this dont work with Laravel Jetstream?

Maybe a setting to allow this behaviour?

When I am adding NPprogress to Laravel Jetstream inertia stack. the following problem occurs:

App.js Code:

`require('./bootstrap');

import Vue from 'vue';

import { InertiaApp } from '@inertiajs/inertia-vue';
import { InertiaProgress } from '@inertiajs/progress';
import { InertiaForm } from 'laravel-jetstream';
import PortalVue from 'portal-vue';

Vue.mixin({ methods: { route } });
Vue.use(InertiaApp);
Vue.use(InertiaForm);
Vue.use(PortalVue);

InertiaProgress.init();

const app = document.getElementById('app');

new Vue({
render: (h) =>
h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: (name) => require(./Pages/${name}).default,
},
}),
}).$mount(app);`

Can I please get some help here.

Hello,

I added this to my Laravel Jetstream Inertia project:

// Loading indicator
import { InertiaProgress } from '@inertiajs/progress'
InertiaProgress.init()

The issue

Every time I click an inertia link i get this error:

Expected behavior

The bar starts loading when clicking a link and finish once the page is loaded.

Actual behavior

Throws an error and the progress bar just continues to load until about 98% while the page has already been loaded.

I am using current versions of Laravel & Inertia.js. I am also using IntertiaProgress 01.2 and looking to use it during a file upload with axios

The files all upload OK but the console shows:

app.js:33316 Uncaught (in promise) TypeError: Cannot read property 'defaultPrevented' of undefined

Tracing this back it points to here in the source of InertiaProgress:

start(event) {
   Promise.resolve().then(() => {
     if (event.defaultPrevented) {
       return
     }

     this.inProgress++
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
       Nprogress.set(0)
       Nprogress.start()
     }, this.delay)
   })
 },

If I console.log(event) I get undefined.

My upload() method:

upload(files) {
    let url = this.$route('library.upload');
    this.$root.showLoading = true;

    const uploadConfig = {
        timeout: 10000,
        onUploadProgress: function(progressEvent) {
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            InertiaProgress.progress(percentCompleted)
        }
    }

    InertiaProgress.start()

    axios.post(url, {
        files,
    },
        uploadConfig
    ).then(res => {
        let files = res.data.files
        if (files.length) {
            this.filesList = cloneDeep(files)
        }

        this.newFiles = []

        InertiaProgress.finish()
        this.$root.showLoading = false
    }).catch(err => {
        console.log(err)

        InertiaProgress.finish()
        this.$root.showLoading = false
    })

Did I miss something or is this an issue with the current version? Thanks.

PS: great work with Inertia.Js!

The nprogress library allows you to configure a parent container like so:

NProgress.configure({ parent: '#container' });

Is it possible to add this configuration option?

Got this error, i'm trying to use for laravel Jetstream project with Inertiajs

Uncaught TypeError: Cannot read property 'visit' of null
at HTMLDocument.s (app.js:122)
at Object.fireEvent (app.js:109)
at app.js:109
at