Skip to content

Commit

Permalink
Set transitions as |local to solve populating destroy (#2865)
Browse files Browse the repository at this point in the history
# Motivation

Svelte transitions are executed by default in components regardless if
their parent components destroy those or not. This behavior is known as
the `|global` transitions.

This leads NNS dapp to various issues in which components are not
destroyed and therefore, there context remains active.

Until today we solved this by applying a workaround in which we
destroyed the all layout in case of navigation. While it solved the
issue, this had for side effect to be a bit unpleasant for the eyes as
the all page layout disappeared on navigation.

By setting all the animation to `|local` we can solve the issue and make
the navigation more fluid.

# References

- documentation:
https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default
- svelte issue: sveltejs/svelte#6686

# PRs

- [x] dfinity/gix-components#246

# Previous issues

- #1741
- #2861

# Changes

- update gix-cmp to set `|local` to any Svelte transitions
- set `|local` to the Svelte animations implemented in NNS dapp
- remove detail page layout navigating guard

# Notes

In the login page we will continue to observe `$navigating` because this
condition was not only used to solve the issue but, also to present a
spinner while the application is loading.
  • Loading branch information
peterpeterparker committed Jul 12, 2023
1 parent aeaaeb3 commit 0c1000b
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 25 deletions.
28 changes: 14 additions & 14 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
$: seconds = date.getTime() / 1000;
</script>

<article data-tid="transaction-card" transition:fade>
<article data-tid="transaction-card" transition:fade|local>
<div class="icon" class:send={!isReceive}>
<IconNorthEast size="24px" />
</div>
Expand Down
9 changes: 0 additions & 9 deletions frontend/src/routes/(app)/(u)/(detail)/+layout.svelte

This file was deleted.

1 change: 0 additions & 1 deletion frontend/src/routes/(login)/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
onMount(async () => await initAppAuth());
</script>

<!-- Workaround for SvelteKit issue https://github.com/sveltejs/kit/issues/5434 -->
{#if isNullish($navigating)}
<Layout layout="stretch">
<Banner />
Expand Down

0 comments on commit 0c1000b

Please sign in to comment.