Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add shake animation to search component when no results
Sebastian Martinez committed 3 years ago
commit 01e01160297c6eafdc930413a8034531f29a1a6c
parent 124dd75ac6593996cda57991d841ac366c1970c4
2 files changed +69 -28
modified src/Search.svelte
@@ -1,7 +1,10 @@
<script lang="ts">
- 
  import { resolve, ResolvedSearch } from "@app/resolver";

  import type { Config } from "@app/config";
+ 


  import { createEventDispatcher } from "svelte";
+ 
  import debounce from "lodash/debounce";
+
+ 
  import { resolve } from "@app/resolver";

  import Loading from "@app/Loading.svelte";

  import TextInput from "@app/TextInput.svelte";
@@ -9,31 +12,63 @@


  let input = "";

  let searching = false;
- 
  let results: ResolvedSearch | null;
+ 
  let shake = false;



  const dispatch = createEventDispatcher();

  const handleKeydown = async (event: KeyboardEvent) => {

    if (event.key === "Enter") {

      searching = true;
- 
      results = await resolve(input, config);
- 
      if (results) {
- 
        dispatch("search", { query: input, results });
- 
      }
- 
      input = "";
- 
      searching = false;
- 
      dispatch("finished");
+ 
      resolve(input, config)
+ 
        .then(results => {
+ 
          const query = input;
+ 
          input = "";
+ 
          searching = false;
+ 
          if (results) dispatch("search", { query, results });
+ 
        })
+ 
        .catch(() => {
+ 
          searching = false;
+ 
          shake = true;
+ 
          debounce(() => (shake = false), 500)();
+ 
          dispatch("finished");
+ 
        });

    }

  };

</script>
- 
<TextInput
- 
  variant="dashed"
- 
  bind:value={input}
- 
  on:keydown={handleKeydown}
- 
  placeholder="Search a name or address…">
- 
  <svelte:fragment slot="right">
- 
    {#if searching}
- 
      <Loading small />
- 
    {/if}
- 
  </svelte:fragment>
- 
</TextInput>
+ 
<style>
+ 
  .horizontal-shake {
+ 
    animation: horizontal-shaking 0.35s;
+ 
  }
+ 
  @keyframes horizontal-shaking {
+ 
    0% {
+ 
      transform: translateX(0);
+ 
    }
+ 
    25% {
+ 
      transform: translateX(5px);
+ 
    }
+ 
    50% {
+ 
      transform: translateX(-5px);
+ 
    }
+ 
    75% {
+ 
      transform: translateX(5px);
+ 
    }
+ 
    100% {
+ 
      transform: translateX(0);
+ 
    }
+ 
  }
+ 
</style>
+
+ 
<div class:horizontal-shake={shake}>
+ 
  <TextInput
+ 
    variant="dashed"
+ 
    disabled={searching}
+ 
    bind:value={input}
+ 
    on:keydown={handleKeydown}
+ 
    placeholder="Search a name or address…">
+ 
    <svelte:fragment slot="right">
+ 
      {#if searching}
+ 
        <Loading small />
+ 
      {/if}
+ 
    </svelte:fragment>
+ 
  </TextInput>
+ 
</div>
modified src/resolver.ts
@@ -1,10 +1,13 @@
- 
import { Project } from "@app/project";
- 
import type { ProjectInfo } from "@app/project";
- 
import * as utils from "@app/utils";
- 
import { ethers } from "ethers";
+ 
import type { Host } from "@app/api";

import type { Config } from "@app/config";
+ 
import type { ProjectInfo } from "@app/project";
+ 


import { navigate } from "svelte-routing";
- 
import type { Host } from "@app/api";
+ 
import { ethers } from "ethers";
+
+ 
import * as utils from "@app/utils";
+ 
import { Project } from "@app/project";
+ 
import { NotFoundError } from "@app/error";

import { Profile, ProfileType } from "@app/profile";



export interface IProject {
@@ -111,9 +114,12 @@ export async function resolve(
      return results;

    }
- 
    return null;
+ 
    throw new NotFoundError("No search results found");

  } catch (e) {
- 
    console.error(e);
- 
    return null;
+ 
    if (e instanceof NotFoundError) {
+ 
      throw new NotFoundError(e.message);
+ 
    } else {
+ 
      throw Error("Not able to resolve search query");
+ 
    }

  }

}