Change to throttle sidebar UI on public page

When connections change quickly the sidebar can flash and strobe, which
is annoying at best and inaccessible at worst. This commit throttles the
UI changes at a maximum of 1 change per second, which reduces the
unwanted behavior.

Note: The `throttle()` method from Mutant doesn't have tests or
documentation, so this is my best guess at how it's meant to be used
from reading the source code.

Author: christianbundy

lib/depject/page/html/render/public.js

@@ -1,5 +1,7 @@
 const nest = require('depnest')
-const { h, send, when, computed, map, onceTrue } = require('mutant')
+const { h, send, when, computed, map, onceTrue, throttle } = require('mutant')
+
+const slow = (input) => throttle(input, 1000)
 
 exports.needs = nest({
   sbot: {
@@ -158,7 +160,7 @@ exports.create = function (api) {
           h('div', {
             classList: 'ProfileList'
           }, [
-            map(whoToFollow, (id) => {
+            map(slow(whoToFollow), (id) => {
               return h('a.profile', {
                 href: id
               }, [
@@ -179,7 +181,7 @@ exports.create = function (api) {
         h('div', {
           classList: 'ProfileList'
         }, [
-          map(peers, peer => {
+          map(slow(peers), peer => {
             const address = peer.address
             const connected = peer.data.state === 'connected'
             const id = peer.data.key
@@ -211,7 +213,7 @@ exports.create = function (api) {
         h('div', {
           classList: 'ProfileList'
         }, [
-          map(peers, peer => {
+          map(slow(peers), peer => {
             const id = peer.data.key
             return h('a.profile', { href: id }, [
               h('div.main', [