Skip to content

Commit a596bec

Browse files
aaaa760aaaa760
committed
Added Progress Bars Succesfully
1 parent c17226e commit a596bec

File tree

3 files changed

+98
-63
lines changed

3 files changed

+98
-63
lines changed

‎src/components/LoginDropDownComponent/UserDetailsForAccountCreationModal.js

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,21 @@ import { getEventHash, getSignature, nip19, SimplePool } from 'nostr-tools';
44
import UploadAndDisplayImage from './UploadUserPicture';
55
import { getProfileFromPublicKey } from '../Profile';
66

7+
function LoadingScreen() {
8+
return (
9+
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex justify-center items-center">
10+
<div className="flex justify-center items-center">
11+
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
12+
</div>
13+
</div>
14+
);
15+
}
16+
717
function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
818
const [username, setUsername] = useState('');
919
const [aboutMe, setAboutMe] = useState('');
1020
const [fileString, setFileString] = useState('');
21+
const [isLoading, setIsLoading] = useState(false);
1122

1223
const choosePicture = url => {
1324
setFileString(url);
@@ -16,15 +27,15 @@ function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
1627
function handleUsernameChange(event) {
1728
setUsername(event.target.value);
1829
}
19-
2030
async function registerAccount(sk, pk) {
31+
setIsLoading(true);
32+
2133
const relays = [
2234
'wss://relay.damus.io',
2335
'wss://relay.primal.net',
2436
'wss://relay.snort.social',
2537
'wss://relay.hllo.live',
2638
];
27-
2839
const pool = new SimplePool();
2940
const encodedSk = sk;
3041
sk = nip19.decode(sk);
@@ -55,17 +66,18 @@ function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
5566

5667
try {
5768
await pool.publish(relays, userRegisterEvent);
58-
5969
pool.close(relays);
60-
6170
const profile = await getProfileFromPublicKey(pk.data);
6271
let details = JSON.parse(profile.content);
6372
details.pubKey = pk.data;
6473
details.privateKey = encodedSk; // Encrypt it.
6574
localStorage.setItem('memestr', JSON.stringify(details));
75+
setIsLoading(false);
76+
onClose();
6677
console.log('Set the default login in local cache.', details);
6778
} catch (error) {
6879
console.error('Error during registration:', error);
80+
setIsLoading(false); // Set loading to false on failure
6981
}
7082
}
7183

@@ -216,6 +228,7 @@ function UserDetailsForAccountCreation({ isOpen, onClose, sk, pk }) {
216228
}}>
217229
Create Account and Login
218230
</button>
231+
{isLoading && <LoadingScreen />}
219232
</div>
220233
</Dialog.Panel>
221234
</Transition.Child>

‎src/components/Post/newPost.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const PostUpload = ({ isOpen, onClose }) => {
1515
const [postStage, setPostStage] = useState(0);
1616
const [isUploading, setIsUploading] = useState(false);
1717
const [showMaxTagsAlert, setShowMaxTagsAlert] = useState(false);
18+
const [postSuccess, setPostSuccess] = useState(false);
1819
const MAX_TAGS = 3;
1920
let alertTimeout = useRef(null);
2021

@@ -480,6 +481,7 @@ const PostUpload = ({ isOpen, onClose }) => {
480481
className="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm"
481482
onClick={() => {
482483
sendNewPostEvent();
484+
setPostSuccess(true);
483485
onClose();
484486
}}>
485487
Post
@@ -491,6 +493,11 @@ const PostUpload = ({ isOpen, onClose }) => {
491493
</div>
492494
</Dialog>
493495
</Transition.Root>
496+
{postSuccess && (
497+
<div className="flex justify-center items-center">
498+
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
499+
</div>
500+
)}
494501
</div>
495502
);
496503
};

‎src/components/Share/modal/index.js

Lines changed: 74 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export function ShareModal({ isOpen, onClose, postUrl }) {
4040
const [inputValue, setInputValue] = useState('');
4141
const [selectedUsers, setSelectedUsers] = useState([]);
4242
const [showSuccessMessage, setShowSuccessMessage] = useState(false);
43+
const [isLoading, setIsLoading] = useState(false);
4344

4445
const [searchedUser, setSearchedUser] = useState([]);
4546
// const [cachedUsers, setCachedUser] = useState(JSON.parse(localStorage.getItem("frequent_shares")) || []);
@@ -67,11 +68,19 @@ export function ShareModal({ isOpen, onClose, postUrl }) {
6768

6869
const handleSearch = async e => {
6970
e.preventDefault();
71+
setIsLoading(true);
7072
setSearchedUser(null);
73+
7174
if (inputValue.trim() !== '') {
72-
const userList = await getUserFromName(inputValue);
73-
const parsedUsers = parseUserContent(userList);
74-
setSearchedUser(parsedUsers);
75+
try {
76+
const userList = await getUserFromName(inputValue);
77+
const parsedUsers = parseUserContent(userList);
78+
setSearchedUser(parsedUsers);
79+
} finally {
80+
setIsLoading(false);
81+
}
82+
} else {
83+
setIsLoading(false);
7584
}
7685
};
7786

@@ -226,63 +235,69 @@ export function ShareModal({ isOpen, onClose, postUrl }) {
226235
</form>
227236

228237
<div className="mt-4">
229-
{getUserList() && (
230-
<div className="flex flex-wrap pl-4 ">
231-
{getUserList().map(user => (
232-
<div
233-
key={user.pubKey}
234-
className={
235-
'flex flex-col items-center m-2 ' +
236-
(isUserSelected(
237-
user.pubKey,
238-
)
239-
? 'selected-user'
240-
: '')
241-
}
242-
style={{
243-
width: '80px', // Add margin to create a gap
244-
}}
245-
onClick={() => {
246-
toggleUserSelection(
247-
user.pubKey,
248-
);
249-
addUserToCache(
250-
user,
251-
);
252-
}}>
253-
<div className="w-full h-12 flex items-center justify-center overflow-hidden ">
254-
<img
255-
src={
256-
user.picture ||
257-
noProfilePictureURL
258-
}
259-
alt={
260-
user.name ||
261-
'Anonymous'
262-
}
263-
className="w-12 h-12 rounded-full"
264-
onError={e => {
265-
e.target.src =
266-
noProfilePictureURL; // Replace with your default image URL
267-
e.target.alt =
268-
'Default Image';
269-
}}
270-
/>
271-
{isUserSelected(
272-
user.pubKey,
273-
) && (
274-
<div className="selected-overlay">
275-
{/* Add a tick mark or any other indicator */}
276-
✓
277-
</div>
278-
)}
279-
</div>
280-
<span className="mt-1 text-s text-center block">
281-
{user.name}
282-
</span>
283-
</div>
284-
))}
238+
{isLoading ? (
239+
<div className="flex justify-center items-center">
240+
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
285241
</div>
242+
) : (
243+
getUserList() && (
244+
<div className="flex flex-wrap pl-4 ">
245+
{getUserList().map(user => (
246+
<div
247+
key={user.pubKey}
248+
className={
249+
'flex flex-col items-center m-2 ' +
250+
(isUserSelected(
251+
user.pubKey,
252+
)
253+
? 'selected-user'
254+
: '')
255+
}
256+
style={{
257+
width: '80px',
258+
}}
259+
onClick={() => {
260+
toggleUserSelection(
261+
user.pubKey,
262+
);
263+
addUserToCache(
264+
user,
265+
);
266+
}}>
267+
<div className="w-full h-12 flex items-center justify-center overflow-hidden ">
268+
<img
269+
src={
270+
user.picture ||
271+
noProfilePictureURL
272+
}
273+
alt={
274+
user.name ||
275+
'Anonymous'
276+
}
277+
className="w-12 h-12 rounded-full"
278+
onError={e => {
279+
e.target.src =
280+
noProfilePictureURL; // Replace with your default image URL
281+
e.target.alt =
282+
'Default Image';
283+
}}
284+
/>
285+
{isUserSelected(
286+
user.pubKey,
287+
) && (
288+
<div className="selected-overlay">
289+
{/* Add a tick mark or any other indicator */}
290+
✓
291+
</div>
292+
)}
293+
</div>
294+
<span className="mt-1 text-s text-center block">
295+
{user.name}
296+
</span>
297+
</div>
298+
))}
299+
</div>
300+
)
286301
)}
287302
</div>
288303
<span className="flex flex-row gap-2 m-2 justify-start">

0 commit comments

Comments
 (0)