Bug: Prismic toolbar new tab refresh loop.

In certain situations, the prismic toolbar goes into a refresh loop.

Steps to reproduce.

Start a new preview session in a certain page.
Open another page in a new tab. For some reason this only works on pages that are slower to load, or maybe that have a lot of javascript in them.
Close the preview session from the new tab.
The new tab page goes into a refresh loop, refreshing over and over and over again.

This actually managed to take our server down from getting hammered by the refresh loop. (It was on a heavy data export page). Please fix it, as we are using a messy workaround in the meantime.

I have the same problem where my page gets stuck in a refresh loop right after hitting "Save" in Prismic. It happens when the page takes more than 3 seconds to load. (eg. Long time to first byte)

Cause:
I think it's related to the following function updatePreview() which is called every 3 seconds:

prismic-toolbar/src/toolbar/preview/index.js

Lines 44 to 48 in 94ef3d8

    
           async updatePreview() { 
        
             const { reload, ref } = await this.client.updatePreview(); 
        
             this.start(ref); 
        
             if (reload) { reloadOrigin(); } 
        
           }

What happens is

reloadOrigin() is called for the first time (after changes are made on Prismic)
The page starts reloading...
After 3 seconds, reloadOrigin is called again. But this will automatically cancel the previous reload.
The page starts reloading again
and so on...

Potential fix:
call reloadOrigin only if there is no other reload in progress.

I'm happy to submit a PR for this if you want.

call reloadOrigin only if there is no other reload in progress.

Or simpler, just call this.cancelPreviewUpdates() before calling reloadOrigin()

Is that what it was? Hmm, I think I may have had a different bug. Not sure honestly - but that pr would go down a treat.

…

On Tue, 6 Apr 2021, 16:43 Paul Nta, ***@***.***> wrote: I have the same problem where my page gets stuck in a refresh loop right after hitting "Save" in Prismic. It happens when the page takes more than 3 seconds to load. (eg. Long time to first byte) *Cause:* I think it's related to the following function updatePreview() which is called every 3 seconds <https://github.com/prismicio/prismic-toolbar/blob/94ef3d89cfcef8951b1bf12fc104afd22008e0b3/src/toolbar/preview/index.js#L32-L38> : https://github.com/prismicio/prismic-toolbar/blob/94ef3d89cfcef8951b1bf12fc104afd22008e0b3/src/toolbar/preview/index.js#L44-L48 What happens is 1. reloadOrigin() is called for the first time (after changes are made on Prismic) 2. The page starts reloading... 3. After 3 seconds, reloadOrigin is called again. But this will automatically cancel the previous reload. 4. The page starts reloading again 5. and so on... *Potential fix:* call reloadOrigin only if there is no other reload in progress. I'm happy to submit a PR for this if you want. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#66 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD26U2G7ETVCUDIETQCJVJLTHMT2TANCNFSM4O4XDS3Q> .

@danielhuggins If you see some request to your page with the status (canceled) (eg. in Chrome DevTools > Network tab), then it means you may have the same bug

Hey @danielhuggins @paulnta, PR #97 should address the issue. It is pending a review.

@danielhuggins - The fix in your PR has been included in #97. Thanks for that fix! 👍

PR #97 has been merged and deployed. The latest version of the toolbar, v4.0.8, should not experience infinite refreshes as described in this issue.

If you experience infinite refreshing please reply here or open a new issue. Thanks! 🙂

	async updatePreview() {
	const { reload, ref } = await this.client.updatePreview();
	this.start(ref);
	if (reload) { reloadOrigin(); }
	}