@peers-app/peers-ui 0.13.4 → 0.13.6

package/dist/screens/groups/group-details.js

@@ -70,6 +70,7 @@ const GroupDetails = (props) => {
             const deleteResult = await originalDelete();
             userContext.defaultDataContext(userContext.userDataContext);
             await (0, peers_sdk_1.sleep)(100);
+            await peers_sdk_1.rpcServerCalls.flushDatabases();
             window.location.reload();
             return deleteResult;
         };

package/dist/tabs-layout/tabs-layout.js

@@ -128,14 +128,16 @@ function TabsLayoutInternal() {
     const [tabs] = (0, hooks_1.useObservable)(tabs_state_1.activeTabs);
     const [activeTab] = (0, hooks_1.useObservable)(tabs_state_1.activeTabId);
     const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = (0, react_1.useState)('');
+    const [switchingGroup, setSwitchingGroup] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         let sub;
         (0, peers_sdk_1.getUserContext)().then(userContext => {
             setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
             sub = userContext.currentlyActiveGroupId.subscribe(async (groupId) => {
                 setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
-                // below reloading logic is a kludge to deal with different groups having different packages installed
-                await (0, peers_sdk_1.sleep)(250);
+                setSwitchingGroup(true);
+                await userContext.waitForActiveGroupPersistence();
+                await peers_sdk_1.rpcServerCalls.flushDatabases();
                 window.location.reload();
             });
         });
@@ -172,6 +174,14 @@ function TabsLayoutInternal() {
         (0, tabs_state_1.activeTabId)(tabId);
     };
     return (react_1.default.createElement("div", { key: currentlyActiveGroupId, className: "d-flex flex-column", style: { height: 'calc(100vh - 25px)', overflow: 'hidden' } },
+        switchingGroup && (react_1.default.createElement("div", { style: {
+                position: 'fixed', inset: 0, zIndex: 9999,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                backgroundColor: _colorMode === 'light' ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)',
+            } },
+            react_1.default.createElement("div", { className: "text-center" },
+                react_1.default.createElement("div", { className: "spinner-border text-secondary mb-3", role: "status" }),
+                react_1.default.createElement("div", { className: `small ${_colorMode === 'light' ? 'text-muted' : 'text-secondary'}` }, "Switching group...")))),
         react_1.default.createElement("div", { className: `border-bottom ${_colorMode === 'light' ? 'bg-light' : 'bg-dark'}`, style: {
                 borderBottomWidth: '1px',
                 borderBottomColor: _colorMode === 'light' ? '#dee2e6' : '#495057'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.13.4",
+  "version": "0.13.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -26,7 +26,7 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.13.4",
+    "@peers-app/peers-sdk": "^0.13.6",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.13.4",
+    "@peers-app/peers-sdk": "0.13.6",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/groups/group-details.tsx

@@ -1,4 +1,4 @@
-import { getIconClassName, getUserContext, Groups, IDoc, IGroup, Observable, generateGroupShare, checkQRCodeCompatibility, copyToClipboard, sleep } from "@peers-app/peers-sdk";
+import { getIconClassName, getUserContext, Groups, IDoc, IGroup, Observable, generateGroupShare, checkQRCodeCompatibility, copyToClipboard, rpcServerCalls, sleep } from "@peers-app/peers-sdk";
 import React, { useState } from "react";
 import { Checkbox } from "../../components/checkbox";
 import { Input } from "../../components/input";
@@ -40,6 +40,7 @@ export const GroupDetails = (props: IProps) => {
       const deleteResult = await originalDelete();
       userContext.defaultDataContext(userContext.userDataContext);
       await sleep(100);
+      await rpcServerCalls.flushDatabases();
       window.location.reload();
       return deleteResult;
     }

package/src/tabs-layout/tabs-layout.tsx

@@ -1,4 +1,4 @@
-import { getUserContext, hasShownWelcomeModal, IAppNav, rpcServerCalls, setDefaultClientUserContext, sleep, Subscription } from "@peers-app/peers-sdk";
+import { getUserContext, hasShownWelcomeModal, IAppNav, rpcServerCalls, setDefaultClientUserContext, Subscription } from "@peers-app/peers-sdk";
 import React, { Component, useEffect, useState } from 'react';
 import { openCommandPalette } from '../command-palette/command-palette';
 import { CommandPaletteOverlay } from '../command-palette/command-palette-ui';
@@ -132,6 +132,7 @@ function TabsLayoutInternal() {
   const [tabs] = useObservable(activeTabs);
   const [activeTab] = useObservable(activeTabId);
   const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = useState('');
+  const [switchingGroup, setSwitchingGroup] = useState(false);
   
   useEffect(() => {
     let sub: Subscription;
@@ -139,8 +140,9 @@ function TabsLayoutInternal() {
       setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId)
       sub = userContext.currentlyActiveGroupId.subscribe(async groupId => {
         setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
-        // below reloading logic is a kludge to deal with different groups having different packages installed
-        await sleep(250);
+        setSwitchingGroup(true);
+        await userContext.waitForActiveGroupPersistence();
+        await rpcServerCalls.flushDatabases();
         window.location.reload();
       });
     });
@@ -184,6 +186,18 @@ function TabsLayoutInternal() {
     <div
       key={currentlyActiveGroupId}
       className="d-flex flex-column" style={{ height: 'calc(100vh - 25px)', overflow: 'hidden' }}>
+      {switchingGroup && (
+        <div style={{
+          position: 'fixed', inset: 0, zIndex: 9999,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          backgroundColor: _colorMode === 'light' ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)',
+        }}>
+          <div className="text-center">
+            <div className="spinner-border text-secondary mb-3" role="status" />
+            <div className={`small ${_colorMode === 'light' ? 'text-muted' : 'text-secondary'}`}>Switching group...</div>
+          </div>
+        </div>
+      )}
       {/* Tabs Header */}
       <div
         className={`border-bottom ${_colorMode === 'light' ? 'bg-light' : 'bg-dark'}`}