Fix data race

[r2dev2]

When two pages try to update the same store at the same time, a data race is created between the backend releasing an update event to the store and the store updating the backend. I have captured the data race in below video (all that is being executed by user code in that page is showing the store value):

2023-03-21_15-46-26.mp4

To get this, I used following code in HyperChat components/Settings.svelte along with a playstore syncstore declared in ts/storage.ts and clicked Do ur mum in each of the two tabs I had opened to the settings page.

<script lang="ts">
  import '../stylesheets/scrollbar.css';
  import { onMount } from 'svelte';
  import Interface from './settings/InterfaceSettings.svelte';
  import { playstore } from '../ts/storage.ts';
  import Button from 'smelte/src/components/Button';

  onMount(() => {
    document.body.classList.add('bg-gray-300');
  });

  const sleep = ms => new Promise(res => setTimeout(res, ms));

  let interval: null | number = null;
  const onclick = async () => {
    if (typeof interval == 'number') {
      clearInterval(interval);
      interval = null;
      return;
    }
    interval = setInterval(async () => {
      let targettime = Math.trunc(Date.now() / 100 + 1) * 100;
      while (Date.now() < targettime) {
        await sleep(1);
      }
      console.log('Doing ur mum: ', Date.now() % 10000);
      $playstore = window.location.hash; // #owo or #uwu
    }, 84);
  };
</script>

<svelte:head>
  <title>HyperChat Settings</title>
</svelte:head>

<div class="m-4">
  <p>Store value: {$playstore}</p>
  <Button on:click={onclick}>Do ur mum</Button>
</div>