chore: improve loading messages

src/ic_panda_frontend/package.json

@@ -80,5 +80,5 @@
     "test": "vitest run"
   },
   "type": "module",
-  "version": "2.2.2"
+  "version": "2.2.3"
 }

src/ic_panda_frontend/src/lib/canisters/actors.ts

@@ -27,6 +27,9 @@ export const createActor = async <T = Record<string, ActorMethod>>({
   return Actor.createActor(idlFactory, {
     agent,
     canisterId
+    // queryTransform: (methodName: string, args: unknown[], callConfig: any) => {
+    //   console.log('queryTransform', methodName, args, callConfig)
+    // }
   })
 }
 

src/ic_panda_frontend/src/lib/components/messages/ChannelMessages.svelte

@@ -204,7 +204,7 @@
       id,
       dek,
       start,
-      start + 20
+      Math.min(start + 20, latestMessageId)
     )
 
     if (messages.length > 0) {
@@ -266,7 +266,12 @@
       async (signal: AbortSignal, abortingQue: (() => void)[]) => {
         abortingQue.push(popupDestroy)
 
-        channelInfo = await myState.refreshChannel(channelInfo)
+        if (
+          !channelInfo._kek ||
+          channelInfo._sync_at < Date.now() - 5 * 60 * 1000
+        ) {
+          channelInfo = await myState.refreshChannel(channelInfo)
+        }
         messageStart = channelInfo.message_start
         latestMessageId = channelInfo.latest_message_id
         lastRead = Math.min(channelInfo.my_setting.last_read, MaybeMaxMessageId)

src/ic_panda_frontend/src/lib/components/messages/ChannelSetting.svelte

@@ -10,6 +10,7 @@
   import IconCircleSpin from '$lib/components/icons/IconCircleSpin.svelte'
   import IconEditLine from '$lib/components/icons/IconEditLine.svelte'
   import IconExchange2Line from '$lib/components/icons/IconExchange2Line.svelte'
+  import IconLogout from '$lib/components/icons/IconLogout.svelte'
   import { toastRun } from '$lib/stores/toast'
   import { errMessage } from '$lib/types/result'
   import { sleep } from '$lib/utils/helper'
@@ -351,7 +352,7 @@
           class="variant-filled-warning disabled:variant-filled-surface"
           on:click={onClickMyLeaving}
           disabled={myLeavingSubmitting || leavingWord != channelInfo.name}
-          >Leave</button
+          ><span class="*:size-5"><IconLogout /></span></button
         >
       </div>
       <span

src/ic_panda_frontend/src/lib/constants.ts

@@ -1,6 +1,6 @@
 const src = globalThis.location?.href || ''
 
-export const APP_VERSION = '2.2.2'
+export const APP_VERSION = '2.2.3'
 export const IS_LOCAL = src.includes('localhost') || src.includes('127.0.0.1')
 export const ENV = IS_LOCAL ? 'local' : 'ic'
 export const APP_ORIGIN = IS_LOCAL

src/ic_panda_frontend/src/lib/stores/message.ts

@@ -34,7 +34,7 @@ import { Principal } from '@dfinity/principal'
 import { derived, readable, type Readable } from 'svelte/store'
 import { asyncFactory } from './auth'
 import { getProfile, getUser, setProfile, setUser } from './kvstore'
-import { MessageAgent } from './message_agent'
+import { MessageAgent, type SyncAt } from './message_agent'
 
 const PWD_HASH_KEY = 'pwd_hash'
 const KEY_ID = encodeCBOR(MASTER_KEY_ID)
@@ -107,10 +107,11 @@ export type ChannelBasicInfoEx = ChannelBasicInfo & {
   latest_message_user: DisplayUserInfo
 }
 
-export type ChannelInfoEx = ChannelInfo & {
-  _kek: Uint8Array | null
-  _managers: string[]
-}
+export type ChannelInfoEx = ChannelInfo &
+  SyncAt & {
+    _kek: Uint8Array | null
+    _managers: string[]
+  }
 
 export class MyMessageState {
   readonly id: string
@@ -944,10 +945,12 @@ export class MyMessageState {
         todo.push(id)
       }
     }
-    const users = await this.api.batch_get_users(todo)
-    for (const info of users) {
-      rt.push(info)
-      await setUser(now, info)
+    if (todo.length > 0) {
+      const users = await this.api.batch_get_users(todo)
+      for (const info of users) {
+        rt.push(info)
+        await setUser(now, info)
+      }
     }
     return rt
   }

src/ic_panda_frontend/src/lib/stores/message_agent.ts

@@ -22,6 +22,10 @@ import { KVS } from './kvstore'
 
 export type CachedMessage = Message & { canister: Principal; channel: number }
 
+export interface SyncAt {
+  _sync_at: number
+}
+
 // should be running in Web Workers.
 export class MessageAgent extends EventTarget {
   readonly id: string
@@ -328,8 +332,11 @@ export class MessageAgent extends EventTarget {
 
   // ------------ Channels ------------
 
-  async getChannel(canister: Principal, id: number): Promise<ChannelInfo> {
-    let val = await this._db.get<ChannelInfo>('Channels', [
+  async getChannel(
+    canister: Principal,
+    id: number
+  ): Promise<ChannelInfo & SyncAt> {
+    let val = await this._db.get<ChannelInfo & SyncAt>('Channels', [
       canister.toUint8Array(),
       id
     ])
@@ -343,7 +350,7 @@ export class MessageAgent extends EventTarget {
     canister: Principal,
     id: number,
     signal?: AbortSignal
-  ): Promise<Readable<ChannelInfo>> {
+  ): Promise<Readable<ChannelInfo & SyncAt>> {
     const channel = await this.getChannel(canister, id)
     const eventType = `Channel:${canister.toText()}/${id}`
     return readable(channel, (set) => {
@@ -467,7 +474,7 @@ export class MessageAgent extends EventTarget {
     canister: Principal,
     id: number,
     updated_at: bigint = 0n
-  ): Promise<ChannelInfo> {
+  ): Promise<ChannelInfo & SyncAt> {
     const api = await this.api.channelAPI(canister)
     const channel = await api.get_channel_if_update(id, updated_at)
     if (!channel) {
@@ -490,7 +497,7 @@ export class MessageAgent extends EventTarget {
     for (const mid of channel.deleted_messages) {
       await this.updateDeletedMessage(canisterId, id, mid)
     }
-    return (await this.setChannel(channel)) as ChannelInfo
+    return (await this.setChannel(channel)) as ChannelInfo & SyncAt
   }
 
   async setChannel(
@@ -500,7 +507,7 @@ export class MessageAgent extends EventTarget {
       channel.canister.toUint8Array(),
       channel.id
     ])
-    val = { ...val, ...channel } as ChannelInfo
+    val = { ...val, ...channel, _sync_at: Date.now() } as ChannelInfo & SyncAt
     await this._db.set('Channels', val)
     this.dispatchEvent(
       new CustomEvent(`Channel:${val.canister.toText()}/${val.id}`, {