Black screen with spinner

[hectoritr]

I was testing the app and found the following issue.

When I tried to add a recorded voice to a tile, I got a full black screen with a purple spinner for quite some time (60 seconds).

Apparently, it is when changes from a short ID to long ID.

[tomivm]

Yes, prepare Picseepal to be remote, take some time. It's not a Bug. We need to add UI to explain the user that we are awaiting a process! It's not related to the record feature. It's created to the first user change in a Picseepal local board.

[RohitSharma50]

assign this task to me @hectoritr @tomivm

[muhammadali-se]

Hi, @hectoritr and @tomivm I'm interested to fix this issue; can you please assign me in to this? and also give me further detail if possible.

[cmdsreedev]

I’d like to work on this issue. Could you please assign it to me?

[tomivm]

Hey!! Sorry I miss this thread! @RohitSharma50 you continue interested? The main thing is to make a pretty UI and maybe put some information text to the screen that show the loading during first boards are created. To see it you can

1. Create an account
2. Make a modification in a PicSeePal board
3. The circular progress appear

I think that that circular progress is this but I am not sure: https://github.com/tomivm/cboard/blob/0ad505f05484051926ad1164358469002b584b11/src/components/Board/Board.container.js#L1521

[RohitSharma50]

Thanks for getting back! @tomivm 🙌 Yes, I’m definitely interested in contributing. I’ll start by looking into the circular progress at the line you mentioned in Board.container.js and work on improving the UI by adding some helpful loading text when the first boards are being created. I’ll open a PR once I have a working change. Please let me know if you have any specific design/text in mind for the loading state.

[tomivm]

Hey! Fine!! We don't have any specification for the design now. Should be good if you add here to the issue your design purposes before start coding to have a look without need to review code. Also please confirm that the spinner that I pointed is the related to the issue :) @RohitSharma50 @muhammadali-se @cmdsreedev Let me know if you are interested on another issue!

[RohitSharma50]

@tomivm

are you alking abou this loader or the other loader that comes with whole screen white LIKE THIS

[tomivm]

The second! It's the whole screen white with the spinner

[RohitSharma50]

hey @tomivm We can use a shimmer UI here. The shimmer card should match the layout of the final content so users know what will appear after loading. You can see an example already applied here: https://full-stack-foodie-app-1.onrender.com/ . This makes the loading state feel smoother and more user-friendly.

I’m still unclear on how to properly trigger the loading state so the shimmer always shows while data is being fetched., i have seen that 2-3 times but i am not able to understand what to do to show the loading on the screen

[tomivm]

MMmm is not about fetching data, is time that the app uses to create boards in the background. For example: A new user open a picseepal board ( all boards all the default boards) Each folder of that board, have a tile that point to the home board. When the user modify the home board, all the folders that point to a default url (of the home board) should be replaced and create in the DB in name of the user. This take some time and this loading is displayed until all necessary boards are created and updated

[RohitSharma50]

@tomivm shimmer ui is not about fetching data its about giving user an illusion that some thing is loading or happening like in my above link you can see it gives user an illusion that some data is loading , in this we can also do this like it can give user an illusion that something is loading untill all boards are created or updated, just think as a user which one is looking good current loader or the loader i am using in my web, just have alook and compare both i can modify the shimmer ui according to what data is going to display after the loading

[tomivm]

I understand! it's a good idea :) The thing is i am feeling that is to much work for something that only happen once for user. After this first loading the app is showing the corresponding and updated board after any change. Maybe is better to improve the current spinner with some information text. To consider shimmer. Make changes in the Board or tiles? is needed? what you gonna show during the loading? empty tiles?

[RohitSharma50]

@tomivm its not too much work here is code for my shimmer https://github.com/RohitSharma50/food-orderinf-website/blob/main/src/components/Shimmer.js but in this project case it will we be much more less code, it’s very lightweight: its Just some

s with CSS animation. if it no change is made in dashboard then its code is not executed then it make 0 effect in web's performance. Even after knowing all this if you still think it could be more user friendly without shimmer then i will find some other ways to make ui more interactive

[tomivm]

Yes I think is better to have a simpler solution now and maybe create a different issue to add shimmer in a different issue, because to much changes could cause that the PR would be hard to review. Because is mostly of how the app works now, when you convert a default board in a remote boards, it blocks the use of the app with that spinner What do you think?

[RohitSharma50]

here are some of the loaders i have seen and finalized in 3rd image(that contain multiple loaders) 4 row and 3 rd column that looks really good according to me this one is best we can use gif or use animation with text or the dog runnig could be the best to show as gif suggest me if you have any ideas in your mind i will try to improvise that

[RohitSharma50]

hello @tomivm tell me if you don't like this i will arrange something else

[VishakhGaitonde]

Hi @tomivm , I'd like to work on implementing the solution to fix this black screen issue. Could you please assign this to me? I will start coding right away.