out:send with duration set higher than 100ms will have a chance to crash and stuck the page... only in Sapper mode, Svelte SPA mode won't happen

[thienpow]

should not close #906 ... as this happen only in Sapper... bcos it won't happen in Svelte SPA mode...
this bug is particularly when using out:send with the duration set higher than 100ms then it will have higher chance to break and stuck the incoming page at the bottom of existing page, if want to reproduce the page stuck on every test, can set the duration to higher than 1000ms then, it will surely stuck. currently i give up /removed all "out:send" to have a more stable app...

Originally posted by @thienpow in #906 (comment)

[antony]

@thienpow do you have a reproduction of this issue that we can try out please?

[thienpow]

@thienpow do you have a reproduction of this issue that we can try out please?

https://www.youtube.com/watch?v=2J2totro8k8
take a look i reproduce it, it crash around 50s of the video after many attempts of no crash...

the code is same as the svelte sample, just that i am using it in sapper.
https://svelte.dev/tutorial/animate

i tried to set console.log everywhere from the 2 pages inside a try catch, get no error message at all.

	const [send, receive] = crossfade({
    
		duration: d => Math.sqrt(d * 200),

		fallback(node, params) {
      
			const style = getComputedStyle(node);
			const transform = style.transform === 'none' ? '' : style.transform;

			return {
				duration: 600,
				easing: quintOut,
				css: t => `
					transform: ${transform} scale(${t});
					opacity: ${t}
				`
			};
		}
  });
  

<div class={containerStyle}>
  
  <div class="text-md font-light">Source Folder: <label class="cursor-pointer text-blue-500" on:click={onSelectFolder}>{sourceFolder}</label></div>
  
  <div class="rounded w-full py-4 px-6" style="min-height: 180px; min-width: 300px; {files.filter(f => !f.isUpload).length == 0 ? 'border: 3px solid green;' : ''}" >
    
    {#if files.length == 0}
      <button class="w-full h-full"  on:click={onSelectFolder} style="min-height: 180px; min-width: 300px;">Select Folder</button>
    {:else}
      {#each files.filter(f => !f.isUpload) as file (file.id)}
        <div
          class="tron-border cursor-pointer text-sm border rounded py-4 pl-4 m-2 dark:border-gray-300 border-primary-600"
          in:receive="{{key: file.id}}"
          out:send="{{key: file.id}}"
          animate:flip
          on:click={() => mark(file, true)}
        >
          <input type="checkbox"  checked={false} on:change={() => mark(file, true)} />
          <label class="p-4">{file.name}</label>
        </div>
      {/each}
    {/if}
  </div>
</div>


<div class={containerStyle}>
  
  <div class="text-md font-light">Destination - IPFS</div>

  <div class="rounded w-full py-4 px-6" >
    
      {#each files.filter(f => f.isUpload) as file (file.id)}
        <div
          class="tron-border cursor-pointer text-sm border rounded py-4 pl-4 m-2 dark:border-gray-300 border-primary-600"
          in:receive="{{key: file.id}}"
          out:send="{{key: file.id}}"
          animate:flip
          on:click={() => mark(file, false)}
        >
          <input type="checkbox"  checked={true} on:change={() => mark(file, false)} />
          <label class="p-4">{file.name}</label>
        </div>
      {/each}

  </div>
</div>

[thienpow]

i was looking for a way to remove/disable all animation during "destroy" but i cant find it...
so my current way is to remove out:send and sacrifice of not having animation

[thienpow]

i tried doing it in svelte "button" loading "page" component, it won't crash... but in Sapper page routing it will have a chance to crash, especially if the 'duration' of the animation is higher.