TBD Proposal cards animation

CHANGELOG-Nns-Dapp-unreleased.md

@@ -16,6 +16,7 @@ proposal is successful, the changes it released will be moved from this file to
 #### Added
 
 * Enabled `ENABLE_CKUSDC` feature flag.
+* Proposal cards animation. 
 
 #### Changed
 

frontend/src/lib/components/launchpad/Proposals.svelte

@@ -31,7 +31,7 @@
 {:else}
   <ul class="card-grid">
     {#each $openSnsProposalsStore as proposalInfo (proposalInfo.id)}
-      <NnsProposalCard {proposalInfo} />
+      <NnsProposalCard {proposalInfo} noAnimation />
     {/each}
   </ul>
 {/if}

frontend/src/lib/components/project-detail/ProjectProposal.svelte

@@ -32,7 +32,7 @@
 
 {#if nonNullish(proposalInfo)}
   <h3>{$i18n.sns_project_detail.swap_proposal}</h3>
-  <NnsProposalCard {proposalInfo} />
+  <NnsProposalCard {proposalInfo} noAnimation />
 {/if}
 
 <style lang="scss">

frontend/src/lib/components/proposals/ActionableNnsProposals.svelte

@@ -8,9 +8,9 @@
 
 <TestIdWrapper testId="actionable-nns-proposals-component">
   {#if $actionableNnsProposalsStore?.proposals?.length ?? 0 > 0}
-    <UniverseWithActionableProposals universe={$nnsUniverseStore}>
-      {#each $actionableNnsProposalsStore?.proposals ?? [] as proposalInfo (proposalInfo.id)}
-        <NnsProposalCard actionable fromActionablePage {proposalInfo} />
+    <UniverseWithActionableProposals universe={$nnsUniverseStore} noAnimation>
+      {#each $actionableNnsProposalsStore?.proposals ?? [] as proposalInfo, index (proposalInfo.id)}
+        <NnsProposalCard actionable fromActionablePage {proposalInfo} {index} />
       {/each}
     </UniverseWithActionableProposals>
   {/if}

frontend/src/lib/components/proposals/ActionableSnsProposals.svelte

@@ -10,9 +10,11 @@
   import { Principal } from "@dfinity/principal";
   import type { Universe } from "$lib/types/universe";
   import type { Readable } from "svelte/store";
+  import { PROPOSAL_CARD_ANIMATION_DELAY_IN_MILLISECOND } from "$lib/constants/constants";
 
   export let universe: Universe;
   export let proposals: ProposalData[];
+  export let cardIndex = 0;
 
   let rootCanisterId: RootCanisterIdText;
   $: rootCanisterId = universe.canisterId;
@@ -27,9 +29,13 @@
 
 <TestIdWrapper testId="actionable-sns-proposals-component">
   {#if nonNullish(nsFunctions)}
-    <UniverseWithActionableProposals {universe}>
-      {#each proposals as proposalData (fromNullable(proposalData.id)?.id)}
+    <UniverseWithActionableProposals
+      {universe}
+      delay={cardIndex * PROPOSAL_CARD_ANIMATION_DELAY_IN_MILLISECOND}
+    >
+      {#each proposals as proposalData, index (fromNullable(proposalData.id)?.id)}
         <SnsProposalCard
+          index={cardIndex + index}
           actionable
           fromActionablePage
           {proposalData}

frontend/src/lib/components/proposals/ActionableSnses.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
-  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import {
     type ActionableSnsProposalsByUniverseData,
     actionableSnsProposalsByUniverseStore,
   } from "$lib/derived/actionable-proposals.derived";
   import ActionableSnsProposals from "$lib/components/proposals/ActionableSnsProposals.svelte";
 
+  export let cardIndex = 0;
+
   let actionableUniverses: ActionableSnsProposalsByUniverseData[] = [];
   $: actionableUniverses = $actionableSnsProposalsByUniverseStore.filter(
     ({ proposals }) => proposals.length > 0
   );
 </script>
 
-<TestIdWrapper testId="actionable-snses-component">
+<div data-tid="actionable-snses-component">
   {#each actionableUniverses as { universe, proposals } (universe.canisterId)}
-    <ActionableSnsProposals {universe} {proposals} />
+    <ActionableSnsProposals {universe} {proposals} {cardIndex} />
   {/each}
-</TestIdWrapper>
+</div>

frontend/src/lib/components/proposals/LoadingProposals.svelte

@@ -1,8 +1,9 @@
 <script>
   import SkeletonCard from "../ui/SkeletonCard.svelte";
+  import { fade } from "svelte/transition";
 </script>
 
-<div class="card-grid" data-tid="proposals-loading">
+<div class="card-grid" data-tid="proposals-loading" in:fade|global>
   <SkeletonCard />
   <SkeletonCard />
   <SkeletonCard />

frontend/src/lib/components/proposals/NnsProposalCard.svelte

@@ -13,6 +13,8 @@
   export let hidden = false;
   export let actionable = false;
   export let fromActionablePage = false;
+  export let index = 0;
+  export let noAnimation = false;
 
   let id: ProposalId | undefined;
   let title: string | undefined;
@@ -35,6 +37,8 @@
 
 <ProposalCard
   {hidden}
+  {index}
+  {noAnimation}
   {actionable}
   {href}
   {status}

frontend/src/lib/components/proposals/NnsProposalsList.svelte

@@ -9,7 +9,6 @@
   import { building } from "$app/environment";
   import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import { actionableNnsProposalsStore } from "$lib/stores/actionable-nns-proposals.store";
-  import { fade } from "svelte/transition";
   import type { ProposalInfo } from "@dfinity/nns";
   import { isNullish } from "@dfinity/utils";
   import ActionableProposalsSignIn from "$lib/components/proposals/ActionableProposalsSignIn.svelte";
@@ -36,7 +35,7 @@
 
   {#if display}
     {#if !$actionableProposalsActiveStore}
-      <div in:fade data-tid="all-proposal-list">
+      <div data-tid="all-proposal-list">
         {#if loadingAnimation === "skeleton"}
           <LoadingProposals />
         {:else if nothingFound}
@@ -48,9 +47,10 @@
               layout="grid"
               disabled={disableInfiniteScroll || loading}
             >
-              {#each $filteredActionableProposals.proposals as proposalInfo (proposalInfo.id)}
+              {#each $filteredActionableProposals.proposals as proposalInfo, index (proposalInfo.id)}
                 <NnsProposalCard
                   {hidden}
+                  {index}
                   actionable={proposalInfo.isActionable}
                   {proposalInfo}
                 />
@@ -60,7 +60,7 @@
         {/if}
       </div>
     {:else}
-      <div in:fade data-tid="actionable-proposal-list">
+      <div data-tid="actionable-proposal-list">
         {#if !$authSignedInStore}
           <ActionableProposalsSignIn />
         {:else if isNullish(actionableProposals)}
@@ -69,8 +69,8 @@
           <ActionableProposalsEmpty />
         {:else}
           <InfiniteScroll layout="grid" disabled>
-            {#each actionableProposals ?? [] as proposalInfo (proposalInfo.id)}
-              <NnsProposalCard {hidden} actionable {proposalInfo} />
+            {#each actionableProposals ?? [] as proposalInfo, index (proposalInfo.id)}
+              <NnsProposalCard {hidden} {index} actionable {proposalInfo} />
             {/each}
           </InfiniteScroll>
         {/if}

frontend/src/lib/components/proposals/NoProposals.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
+  import { fade } from "svelte/transition";
 </script>
 
-<p class="description" data-tid="no-proposals-msg">
+<p class="description" data-tid="no-proposals-msg" in:fade|global>
   {$i18n.voting.nothing_found}
 </p>

frontend/src/lib/components/proposals/ProposalCard.svelte

@@ -9,11 +9,20 @@
   import { i18n } from "$lib/stores/i18n";
   import Countdown from "./Countdown.svelte";
   import { nowInSeconds } from "$lib/utils/date.utils";
-  import { nonNullish } from "@dfinity/utils";
+  import { isNullish, nonNullish } from "@dfinity/utils";
   import { shortenWithMiddleEllipsis } from "$lib/utils/format.utils";
   import { PROPOSER_ID_DISPLAY_SPLIT_LENGTH } from "$lib/constants/proposals.constants";
   import type { UniversalProposalStatus } from "$lib/types/proposals";
   import ProposalStatusTag from "$lib/components/ui/ProposalStatusTag.svelte";
+  import { fly, type FlyParams } from "svelte/transition";
+  import {
+    PROPOSAL_CARD_ANIMATION_DELAY_IN_MILLISECOND,
+    PROPOSAL_CARD_ANIMATION_DURATION_IN_MILLISECOND,
+    PROPOSAL_CARD_ANIMATION_EASING,
+    PROPOSAL_CARD_ANIMATION_Y,
+  } from "$lib/constants/constants";
+  import { isNode } from "$lib/utils/dev.utils";
+  import { isHtmlElementInViewport } from "$lib/utils/utils";
 
   export let hidden = false;
   export let actionable = false;
@@ -25,9 +34,47 @@
   export let proposer: string | undefined;
   export let deadlineTimestampSeconds: bigint | undefined;
   export let href: string;
+  export let index = 0;
+  export let noAnimation = false;
+
+  let element: HTMLElement;
+
+  let inViewport: boolean = false;
+  $: inViewport =
+    isNode() || isNullish(element) ? true : isHtmlElementInViewport(element);
+
+  // A short delay to wait when the cards are being rendered.
+  // This process takes some time on FF and Safari, which makes the animation look not perfect.
+  const CARD_ANIMATION_DELAY = 250;
+  // Apply sequential fly animation to only first cards:
+  // 1. to not waist resources on not visible animation;
+  // 2. to make the proposal lazy loading still looks good.
+  const TOP_MAX_ANIMATED_CARDS = 18;
+  let topCards = false;
+  $: topCards = index < TOP_MAX_ANIMATED_CARDS;
+  let flyAnimation: FlyParams = {};
+  $: flyAnimation = {
+    duration: noAnimation
+      ? 0
+      : topCards
+      ? PROPOSAL_CARD_ANIMATION_DURATION_IN_MILLISECOND
+      : 0,
+    delay: topCards
+      ? index * PROPOSAL_CARD_ANIMATION_DELAY_IN_MILLISECOND +
+        CARD_ANIMATION_DELAY
+      : // Adjust the animation start time for cards other than the first ones,
+        // so they appear right after the first cards becomes visible.
+        TOP_MAX_ANIMATED_CARDS * PROPOSAL_CARD_ANIMATION_DELAY_IN_MILLISECOND +
+        CARD_ANIMATION_DELAY +
+        PROPOSAL_CARD_ANIMATION_DURATION_IN_MILLISECOND / 2,
+    // Do not apply any animation to the cards that are not in the viewport.
+    y: inViewport ? PROPOSAL_CARD_ANIMATION_Y : 0,
+    opacity: inViewport ? 0 : 1,
+    easing: PROPOSAL_CARD_ANIMATION_EASING,
+  };
 </script>
 
-<li class:hidden>
+<li bind:this={element} class:hidden in:fly|global={flyAnimation}>
   <Card testId="proposal-card" {href}>
     <div class="container">
       <div>
@@ -95,6 +142,7 @@
 
   li {
     list-style: none;
+    will-change: transform, opacity;
   }
 
   .container {

frontend/src/lib/components/proposals/UniverseWithActionableProposals.svelte

@@ -2,12 +2,24 @@
   import type { Universe } from "$lib/types/universe";
   import { InfiniteScroll } from "@dfinity/gix-components";
   import UniversePageSummary from "$lib/components/universe/UniversePageSummary.svelte";
+  import { fade } from "svelte/transition";
+  import { SVELTE_DEFAULT_ANIMATION_DURATION_IN_MILLISECOND } from "$lib/constants/constants";
 
   export let universe: Universe;
+  export let delay = 0;
+  export let noAnimation = false;
 </script>
 
 <div class="container" data-tid="universe-with-actionable-proposals-component">
-  <div class="title">
+  <div
+    in:fade|global={{
+      delay,
+      duration: noAnimation
+        ? 0
+        : SVELTE_DEFAULT_ANIMATION_DURATION_IN_MILLISECOND,
+    }}
+    class="title"
+  >
     <UniversePageSummary {universe} />
   </div>
 

frontend/src/lib/components/sns-proposals/SnsProposalCard.svelte

@@ -21,6 +21,7 @@
   export let actionable = false;
   export let fromActionablePage = false;
   export let hidden = false;
+  export let index = 0;
 
   let id: SnsProposalId | undefined;
   let title: string | undefined;
@@ -53,6 +54,7 @@
 <ProposalCard
   {status}
   {hidden}
+  {index}
   {actionable}
   {href}
   id={id?.id}

frontend/src/lib/components/sns-proposals/SnsProposalsList.svelte

@@ -29,7 +29,7 @@
   <SnsProposalsFilters />
 
   {#if !actionableSelected}
-    <div in:fade data-tid="all-proposal-list">
+    <div data-tid="all-proposal-list">
       {#if proposals === undefined}
         <LoadingProposals />
       {:else if proposals.length === 0}
@@ -41,8 +41,9 @@
             on:nnsIntersect
             disabled={disableInfiniteScroll}
           >
-            {#each proposals as proposalData (fromNullable(proposalData.id)?.id)}
+            {#each proposals as proposalData, index (fromNullable(proposalData.id)?.id)}
               <SnsProposalCard
+                {index}
                 actionable={proposalData.isActionable}
                 {proposalData}
                 {nsFunctions}
@@ -65,8 +66,9 @@
         <ActionableProposalsEmpty />
       {:else}
         <InfiniteScroll layout="grid" disabled>
-          {#each proposals as proposalData (fromNullable(proposalData.id)?.id)}
+          {#each proposals as proposalData, index (fromNullable(proposalData.id)?.id)}
             <SnsProposalCard
+              {index}
               actionable={proposalData.isActionable}
               {proposalData}
               rootCanisterId={$pageStore.universe}

frontend/src/lib/constants/constants.ts

@@ -1,3 +1,5 @@
+import { cubicOut } from "svelte/easing";
+
 export const DEFAULT_LIST_PAGINATION_LIMIT = 100;
 export const MAX_ACTIONABLE_REQUEST_COUNT = 5;
 // Use a different limit for Icrc transactions
@@ -22,3 +24,12 @@ export const DAYS_IN_NON_LEAP_YEAR = 365;
 
 export const NANO_SECONDS_IN_MILLISECOND = 1_000_000;
 export const NANO_SECONDS_IN_MINUTE = NANO_SECONDS_IN_MILLISECOND * 1_000 * 60;
+
+// Animation constants
+export const SVELTE_DEFAULT_ANIMATION_DURATION_IN_MILLISECOND = 400;
+export const PROPOSAL_CARD_ANIMATION_DURATION_IN_MILLISECOND =
+  SVELTE_DEFAULT_ANIMATION_DURATION_IN_MILLISECOND;
+// Maximum 10 card animations at a time
+export const PROPOSAL_CARD_ANIMATION_DELAY_IN_MILLISECOND = 40;
+export const PROPOSAL_CARD_ANIMATION_Y = 50;
+export const PROPOSAL_CARD_ANIMATION_EASING = cubicOut;

frontend/src/lib/pages/ActionableProposals.svelte

@@ -8,19 +8,30 @@
   import LoadingActionableProposals from "$lib/components/proposals/LoadingActionableProposals.svelte";
   import ActionableProposalsEmpty from "$lib/components/proposals/ActionableProposalsEmpty.svelte";
   import ActionableProposalsNotSupportedSnses from "$lib/components/proposals/ActionableProposalsNotSupportedSnses.svelte";
+  import { fade } from "svelte/transition";
+  import { actionableNnsProposalsStore } from "$lib/stores/actionable-nns-proposals.store";
+
+  let nnsProposalCount = 0;
+  $: nnsProposalCount = ($actionableNnsProposalsStore?.proposals ?? []).length;
 </script>
 
 <div class="container" data-tid="actionable-proposals-component">
   {#if $actionableProposalsLoadedStore}
     {#if $actionableProposalTotalCountStore > 0}
       <ActionableNnsProposals />
-      <ActionableSnses />
-      <ActionableProposalsNotSupportedSnses />
+      <ActionableSnses cardIndex={nnsProposalCount} />
+      <div in:fade>
+        <ActionableProposalsNotSupportedSnses />
+      </div>
     {:else}
-      <ActionableProposalsEmpty />
+      <div in:fade>
+        <ActionableProposalsEmpty />
+      </div>
     {/if}
   {:else}
-    <LoadingActionableProposals />
+    <div in:fade>
+      <LoadingActionableProposals />
+    </div>
   {/if}
 </div>