Add squares animation

src/core/plugins/adb/plugin.js

@@ -72,7 +72,7 @@ class AdbPlugin extends Plugin {
   action__format({ partition }) {
     return Promise.resolve()
       .then(() => {
-        this.event.emit("user:write:working", "particles");
+        this.event.emit("user:write:working", "squares");
         this.event.emit(
           "user:write:status",
           "Preparing system for installation",
@@ -91,7 +91,7 @@ class AdbPlugin extends Plugin {
    */
   action__sideload({ group, file }) {
     return Promise.resolve().then(() => {
-      this.event.emit("user:write:working", "particles");
+      this.event.emit("user:write:working", "circuit");
       this.event.emit("user:write:status", `Sideloading ${group}`, true);
       this.event.emit(
         "user:write:under",

src/core/plugins/fastboot/plugin.js

@@ -189,7 +189,7 @@ class FastbootPlugin extends Plugin {
    */
   action__erase({ partition }) {
     return Promise.resolve().then(() => {
-      this.event.emit("user:write:working", "particles");
+      this.event.emit("user:write:working", "squares");
       this.event.emit("user:write:status", "Cleaning up", true);
       this.event.emit(
         "user:write:under",
@@ -205,7 +205,7 @@ class FastbootPlugin extends Plugin {
    */
   action__format({ partition, type, size }) {
     return Promise.resolve().then(() => {
-      this.event.emit("user:write:working", "particles");
+      this.event.emit("user:write:working", "squares");
       this.event.emit("user:write:status", "Cleaning up", true);
       this.event.emit(
         "user:write:under",

src/core/plugins/heimdall/plugin.js

@@ -95,7 +95,7 @@ class HeimdallPlugin extends Plugin {
    */
   action__flash({ partitions }) {
     return Promise.resolve().then(() => {
-      this.event.emit("user:write:working", "particles");
+      this.event.emit("user:write:working", "circuit");
       this.event.emit("user:write:status", "Flashing firmware", true);
       this.event.emit(
         "user:write:under",

src/ui/partials/Animation.svelte

@@ -3,6 +3,7 @@
   import { animationType } from "../../stores.mjs";
   import { tsParticles } from "tsparticles";
   import CircuitBoard from "./CircuitBoard.svelte";
+  import Squares from "./Squares.svelte";
 
   onMount(updateAnimations);
   animationType.subscribe(updateAnimations);
@@ -57,11 +58,17 @@
   HACK particles can not be conditionally rendered to be reliably shown when transitioning from one working view to the next. We thus hide and show them using css rather than svelte's built-in conditional rendering. Unfortunately, svelte does not yet posess an equivalet to Vue's v-show field.
 -->
 <div id="tsparticles" class="animation" />
+
 {#if $animationType === "circuit"}
   <div class="animation">
     <CircuitBoard />
   </div>
 {/if}
+{#if $animationType === "squares"}
+  <div class="animation">
+    <Squares />
+  </div>
+{/if}
 {#if $animationType === "download"}
   <div class="download-animation animation" />
 {/if}

src/ui/partials/Squares.svelte

@@ -0,0 +1,55 @@
+<div class="square" />
+<div class="square" />
+<div class="square" />
+<div class="square" />
+<div class="square" />
+<div class="square" />
+
+<style>
+  .square {
+    position: absolute;
+    top: 80vh;
+    left: 45vw;
+    width: 10px;
+    height: 10px;
+    border: solid 1px #6c757d;
+    transform-origin: top left;
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    animation: