Speed things up by removing animations

CHANGELOG.md

@@ -30,6 +30,7 @@
 - [x] Encode relays into urls when possible
 - [x] Opt-in to local relay when it's actually useful
 - [x] Fix link overflow when media previews are off
+- [x] Speed things up by using animations more sparingly
 
 # 0.3.10
 

src/app/Routes.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {reverse} from "ramda"
+  import {fly} from "src/util/transition"
   import type {HistoryItem} from "src/util/router"
   import {decodeQueryString, decodeRouteParams} from "src/util/router"
   import Modal from "src/partials/Modal.svelte"
@@ -31,7 +32,9 @@
 <div class="pt-16 text-gray-2 lg:ml-48" class:pointer-events-none={$menuIsOpen}>
   {#if $page}
     {#key $page.path}
+      <div in:fly={{y: 20}}>
         <svelte:component this={$page.route.component} {...getProps($page)} />
+      </div>
     {/key}
   {/if}
 </div>

src/app/shared/Feed.svelte

@@ -4,6 +4,7 @@
   import {Storage} from "hurdak"
   import {FeedLoader} from "src/engine"
   import {createScroller} from "src/util/misc"
+  import {fly} from "src/util/transition"
   import {getModal} from "src/partials/state"
   import Spinner from "src/partials/Spinner.svelte"
   import Content from "src/partials/Content.svelte"
@@ -88,12 +89,14 @@
     </FeedControls>
   {/if}
   <div class="flex flex-col gap-4">
-    {#each $notes as note (note.id)}
+    {#each $notes as note, i (note.id)}
+      <div in:fly={{y: 20, duration: i < 5 ? 100 : 0}}>
         <Note
           depth={$hideReplies ? 0 : 2}
           context={note.replies || []}
           filters={[compileFilter(filter)]}
           {note} />
+      </div>
     {/each}
   </div>
   <Spinner />

src/app/shared/FeedControls.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import {pluck, not, find, propEq, prop, equals, omit, objOf} from "ramda"
   import {displayList} from "hurdak"
   import {debounce} from "throttle-debounce"
@@ -204,7 +203,7 @@
   }
 </script>
 
-<div in:fly={{y: 20}}>
+<div>
   <div class="float-right flex justify-end gap-1">
     <div class="flex items-center gap-1">
       <Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} />

src/app/shared/Note.svelte

@@ -2,8 +2,8 @@
   import {partition, reject, propEq, uniqBy, prop} from "ramda"
   import {onMount, onDestroy} from "svelte"
   import {quantify, batch} from "hurdak"
-  import {LOCAL_RELAY_URL, Tags, findRootId, isChildOf, findReplyId, isLike} from "src/util/nostr"
   import {fly} from "src/util/transition"
+  import {LOCAL_RELAY_URL, Tags, findRootId, isChildOf, findReplyId, isLike} from "src/util/nostr"
   import {formatTimestamp} from "src/util/misc"
   import Popover from "src/partials/Popover.svelte"
   import Spinner from "src/partials/Spinner.svelte"
@@ -57,7 +57,6 @@
   let collapsed = depth === 0
   let ctx = uniqBy(prop("id"), context)
 
-  const {ENABLE_ZAPS} = $env
   const showEntire = anchorId === event.id
   const interactive = !anchorId || !showEntire
 
@@ -128,7 +127,7 @@
   onMount(async () => {
     const zapAddress = Tags.from(note).getMeta("zap")
 
-    if (zapAddress) {
+    if (zapAddress && getLnUrl(zapAddress)) {
       zapper = await getZapper(getLnUrl(zapAddress))
     } else {
       unsubZapper = people.key(note.pubkey).subscribe($p => {
@@ -148,7 +147,7 @@
 
       const kinds = [1, 7]
 
-      if (ENABLE_ZAPS) {
+      if ($env.ENABLE_ZAPS) {
         kinds.push(9735)
       }
 
@@ -284,16 +283,14 @@
         {#if !showEntire && replies.length > visibleReplies.length}
           <button class="ml-5 cursor-pointer py-2 text-gray-1 outline-0" on:click={onClick}>
             <i class="fa fa-up-down pr-2 text-sm" />
-            Show {quantify(
+            Show {quantify(replies.length - visibleReplies.length, "other reply", "more replies")}
-              replies.length - visibleReplies.length,
-              "other reply",
-              "more replies"
-            )}
           </button>
           <div class="absolute -left-4 -top-2 h-14 w-px bg-gray-6" />
         {:else if visibleReplies.length > 0 || showHiddenReplies}
           <div class="absolute -left-4 -top-2 h-4 w-px bg-gray-6" />
         {/if}
+        {#if visibleReplies.length}
+          <div in:fly={{y: 20}}>
             {#each visibleReplies as r, i (r.id)}
               <svelte:self
                 isLastReply={!showMutedReplies && i === visibleReplies.length - 1}
@@ -304,7 +301,10 @@
                 context={ctx}
                 {anchorId} />
             {/each}
+          </div>
+        {/if}
         {#if showHiddenReplies}
+          <div in:fly={{y: 20}}>
             {#each hiddenReplies as r, i (r.id)}
               <svelte:self
                 isLastReply={i === hiddenReplies.length - 1}
@@ -315,10 +315,10 @@
                 context={ctx}
                 {anchorId} />
             {/each}
+          </div>
         {:else if showEntire && hiddenReplies.length > 0}
           <button
             class="ml-5 cursor-pointer py-2 text-gray-1 outline-0"
-            in:fly={{y: 20}}
             on:click={() => {
               showMutedReplies = true
             }}>

src/app/shared/PersonRelays.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import Content from "src/partials/Content.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
 
   export let relays
 </script>
 
-<div in:fly={{y: 20}}>
 <Content>
   <p>
-      Below are the relays this user publishes to. Join one or more to make sure you never miss
+    Below are the relays this user publishes to. Join one or more to make sure you never miss their
-      their updates.
+    updates.
   </p>
   {#if relays.length === 0}
     <div class="pt-8 text-center">No relays found</div>
@@ -22,4 +20,3 @@
     </div>
   {/if}
 </Content>
-</div>

src/app/shared/RelayCard.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import {stringToHue, hsl} from "src/util/misc"
   import Toggle from "src/partials/Toggle.svelte"
   import Rating from "src/partials/Rating.svelte"
@@ -18,8 +17,7 @@
 
 <div
   class="flex flex-col justify-between gap-3 rounded-xl border border-l-2 border-solid border-gray-6 bg-gray-8 px-6 py-3 shadow"
-  style={`border-left-color: ${hsl(stringToHue(relay.url))}`}
+  style={`border-left-color: ${hsl(stringToHue(relay.url))}`}>
-  in:fly={{y: 20}}>
   <div class="flex items-center justify-between gap-2">
     <div class="flex min-w-0 items-center gap-2 text-xl">
       <i class={relay.url.startsWith("ws://") ? "fa fa-unlock" : "fa fa-lock"} />
@@ -32,7 +30,7 @@
         <RelayStatus {relay} />
       {/if}
       {#if rating}
-        <div class="px-4 text-sm" in:fly={{y: 20}}>
+        <div class="px-4 text-sm">
           <Rating inert value={rating} />
         </div>
       {/if}

src/app/views/Apps.svelte

@@ -5,7 +5,6 @@
   import {tryJson, displayDomain, pushToKey} from "src/util/misc"
   import {copyToClipboard} from "src/util/html"
   import {Tags} from "src/util/nostr"
-  import {fly} from "src/util/transition"
   import {toast} from "src/partials/state"
   import Image from "src/partials/Image.svelte"
   import Anchor from "src/partials/Anchor.svelte"
@@ -102,7 +101,6 @@
   document.title = "Apps"
 </script>
 
-<div in:fly={{y: 20}}>
 <div class="flex flex-col gap-12 p-4">
   <div class="flex flex-col items-center justify-center">
     <Heading>Recommended micro-apps</Heading>
@@ -128,14 +126,18 @@
             </Anchor>
           {/if}
           {#if app.profile.lud16}
-              <Anchor class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => copy("Address", app.profile.lud16)}>
+            <Anchor
+              class="mb-2 mr-2 inline-block cursor-pointer"
+              on:click={() => copy("Address", app.profile.lud16)}>
               <Chip>
                 <i class="fa fa-bolt" />{app.profile.lud16}
               </Chip>
             </Anchor>
           {/if}
           {#if app.profile.nip05}
-              <Anchor class="mb-2 mr-2 inline-block cursor-pointer" on:click={() => goToNip05(app.profile.nip05)}>
+            <Anchor
+              class="mb-2 mr-2 inline-block cursor-pointer"
+              on:click={() => goToNip05(app.profile.nip05)}>
               <Chip>
                 <i class="fa fa-at" />{app.profile.nip05}
               </Chip>
@@ -154,4 +156,3 @@
     {/each}
   </div>
 </div>
-</div>

src/app/views/Logout.svelte

@@ -26,7 +26,7 @@
   {#if confirmed}
     <div in:fly={{y: 20}}>Clearing your local database...</div>
   {:else}
-    <div class="flex flex-col items-center gap-8" in:fly={{y: 20}}>
+    <div class="flex flex-col items-center gap-8">
       <div>Are you sure you want to log out? All data will be cleared.</div>
       <Anchor theme="button" on:click={confirm}>Log out</Anchor>
     </div>

src/app/views/NoteDetail.svelte

@@ -2,6 +2,7 @@
   import {onMount} from "svelte"
   import {defer} from "hurdak"
   import {isMobile} from "src/util/html"
+  import {fly} from "src/util/transition"
   import Content from "src/partials/Content.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Note from "src/app/shared/Note.svelte"
@@ -23,6 +24,8 @@
   {#await promise}
     <Spinner />
   {:then note}
+    <div in:fly={{y: 20}}>
       <Note showLoading anchorId={note.id} {note} {depth} {relays} {context} />
+    </div>
   {/await}
 </Content>

src/app/views/Notifications.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {find, assocPath} from "ramda"
   import {onMount} from "svelte"
-  import {fly} from "src/util/transition"
   import {now, createScroller, formatTimestampAsDate} from "src/util/misc"
   import {noteKinds, reactionKinds} from "src/util/nostr"
   import Tabs from "src/partials/Tabs.svelte"
@@ -30,7 +29,7 @@
 
   export let activeTab = tabs[0]
 
-  let limit = 5
+  let limit = 4
 
   $: tabKinds = activeTab === tabs[0] ? noteKinds : reactionKinds.concat(9734)
 
@@ -55,7 +54,7 @@
     })
 
     const scroller = createScroller(async () => {
-      limit += 5
+      limit += 4
     })
 
     return () => {
@@ -65,7 +64,6 @@
   })
 </script>
 
-<div in:fly={{y: 20, delay: 500}}>
 <Content>
   <Tabs {tabs} {activeTab} {setActiveTab} />
   {#each tabNotifications as notification, i (notification.key)}
@@ -87,4 +85,3 @@
     <Content size="lg" class="text-center">No notifications found - check back later!</Content>
   {/each}
 </Content>
-</div>

src/app/views/Onboarding.svelte

@@ -2,7 +2,6 @@
   import {onMount} from "svelte"
   import {generatePrivateKey} from "nostr-tools"
   import {closure, sleep} from "hurdak"
-  import {fly} from "src/util/transition"
   import Content from "src/partials/Content.svelte"
   import OnboardingIntro from "src/app/views/OnboardingIntro.svelte"
   import OnboardingProfile from "src/app/views/OnboardingProfile.svelte"
@@ -95,7 +94,6 @@
 </script>
 
 {#key stage}
-  <div in:fly={{y: 20}}>
   <Content size="lg">
     {#if stage === "intro"}
       <OnboardingIntro {setStage} />
@@ -111,5 +109,4 @@
       <OnboardingNote {setStage} {signup} />
     {/if}
   </Content>
-  </div>
 {/key}

src/app/views/RelayList.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
   import RelayCard from "src/app/shared/RelayCard.svelte"
@@ -11,7 +10,6 @@
   document.title = "Relays"
 </script>
 
-<div in:fly={{y: 20}}>
 <Content>
   <div class="flex justify-between">
     <div class="flex items-center gap-2">
@@ -23,8 +21,8 @@
     </Anchor>
   </div>
   <p>
-      Relays are hubs for your content and connections. At least one is required to interact with
+    Relays are hubs for your content and connections. At least one is required to interact with the
-      the network, but you can join as many as you like.
+    network, but you can join as many as you like.
   </p>
   {#if $relayPolicies.length === 0}
     <div class="mt-8 flex items-center justify-center gap-2 text-center">
@@ -38,4 +36,3 @@
     {/each}
   </div>
 </Content>
-</div>

src/app/views/UserContent.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {pluck, identity} from "ramda"
-  import {fly} from "src/util/transition"
   import {Tags} from "src/util/nostr"
   import {toast, appName} from "src/partials/state"
   import Input from "src/partials/Input.svelte"
@@ -49,7 +48,7 @@
   document.title = "Content Preferences"
 </script>
 
-<form on:submit|preventDefault={submit} in:fly={{y: 20}}>
+<form on:submit|preventDefault={submit}>
   <Content>
     <div class="mb-4 flex flex-col items-center justify-center">
       <Heading>Content Settings</Heading>
@@ -75,7 +74,8 @@
         </div>
         <Input type="range" bind:value={settings.min_wot_score} min={0} max={100} />
         <p slot="info">
-          Select a minimum <Anchor theme="anchor" modal href="/help/web-of-trust">web-of-trust</Anchor>
+          Select a minimum <Anchor theme="anchor" modal href="/help/web-of-trust"
+            >web-of-trust</Anchor>
           score. Notes from accounts with a lower score will be automatically hidden.
         </p>
       </Field>

src/app/views/UserKeys.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import {nip19} from "nostr-tools"
   import {copyToClipboard} from "src/util/html"
   import Input from "src/partials/Input.svelte"
@@ -27,7 +26,6 @@
   document.title = "Keys"
 </script>
 
-<div in:fly={{y: 20}}>
 <Content>
   <div class="flex flex-col items-center justify-center">
     <Heading>Your Keys</Heading>
@@ -89,11 +87,10 @@
             on:click={() => copyKey("bunker", $session.bunkerKey)} />
         </Input>
         <p class="text-sm text-gray-1">
-            Your bunker key is used to authorize Coracle with your nsec bunker to sign events on
+          Your bunker key is used to authorize Coracle with your nsec bunker to sign events on your
-            your behalf. Save this if you would like to log in elsewhere without re-authorizing.
+          behalf. Save this if you would like to log in elsewhere without re-authorizing.
         </p>
       </div>
     {/if}
   </div>
 </Content>
-</div>

src/app/views/UserProfile.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import Input from "src/partials/Input.svelte"
   import ImageInput from "src/partials/ImageInput.svelte"
   import Textarea from "src/partials/Textarea.svelte"
@@ -29,7 +28,7 @@
   document.title = "Profile"
 </script>
 
-<form on:submit|preventDefault={submit} in:fly={{y: 20}}>
+<form on:submit|preventDefault={submit}>
   <Content>
     <div class="mb-4 flex flex-col items-center justify-center">
       <Heading>About You</Heading>

src/app/views/UserSettings.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {fly} from "src/util/transition"
   import {toast, appName} from "src/partials/state"
   import Field from "src/partials/Field.svelte"
   import FieldInline from "src/partials/FieldInline.svelte"
@@ -21,7 +20,7 @@
   document.title = "Settings"
 </script>
 
-<form on:submit|preventDefault={submit} in:fly={{y: 20}}>
+<form on:submit|preventDefault={submit}>
   <Content>
     <div class="mb-4 flex flex-col items-center justify-center">
       <Heading>App Settings</Heading>

src/partials/Card.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import cx from "classnames"
   import {createEventDispatcher} from "svelte"
-  import {fly} from "src/util/transition"
 
   export let interactive = false
   export let stopPropagation = false
@@ -35,7 +34,6 @@
 </script>
 
 <div
-  in:fly={{y: 20}}
   on:mousedown={startClick}
   on:touchstart={startClick}
   on:click={onClick}