Add more waiting messages

[s0lness]

It takes a lot of time to generate the proofs. To help users wait we should add

• A disclaimer at the beginning of the flow: "Generating proofs takes quite a bit of time! Please be patient 🙏"
• Then every 5 seconds change the waiting message with some fun messages. Some ideas:
  • "Eternity is a long time, especially towards the end" Groucho Marx.
  • "Hang in there!"
  • "zk is the future, it's just taking its sweet time."
  • "It's been 84 years..."
  • "Did you know that "esperar" in Spanish both means "wait" and "hope"?

cc @alexture

[alexture]

• Keep vibing, we're almost done!
• Are your cheeks starting to hurt from all this smiling?
• When I was your age, it took ten minutes to load an image.
• There's less time between Cleopatra's lifetime and Giza zkML than between her lifetime and the Giza pyramids.

[pivilartisant]

hey ! if you're still looking for someone to do this I'm up for the task :)

[s0lness]

Hiya! We'll hold on this issue for a bit cos we have some refactoring to do on the app right now. But will ping once it's good!

[NueloSE]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Am a frontend developer with express in using typescript javascript and react
with basic understand of cairo language.

i have contributed to cairo projects in the past via the onlydust platform

How I plan on tackling this issue

steps to implement the task

1. create an array of waiting messages to cycle throught
2. set the html structure in the index.html file under the vibe-check-frontend
3. implement message cycling logic for cycling after 5 seconds.

[petersdt]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a frontend develop with experience in frontend technologies like javascript, typescript, react.

How I plan on tackling this issue

steps to tackle the task.

1. create an array with waiting message
2. setup html structure in index.html
3. create logic for cycling message in the typescript file
4. additional css enhancements

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i'm a fullstack dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this i i'm giving the oppotunity

How I plan on tackling this issue

Identify the Flow: Determine where in the user flow you want to display the waiting message.
Add Disclaimer: Place a disclaimer at the beginning, explaining that proof generation takes time.
Set Up a Timer: Create a timer that triggers every 5 seconds.
Prepare Waiting Messages: Create a list of fun and engaging messages.
Update Message: Each time the timer triggers, randomly select a message and display it.
Continue Updates: Keep updating the message until the proof generation is complete.

Gemini may display inaccurate info, including about people, so double-check its responses. Your privacy and Gemini AppsOpens in a new window

[MatiasAchucarro]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a passionate and results-driven web developer, currently deepening my knowledge in web3 technologies, Cairo, and open-source development through Dojo Coding. My skill set includes expertise in JavaScript, React, HTML, CSS, C# with .NET Entity Framework, and more. I also have experience with tools like Git, GitHub, SQL Server, and Postman. My focus has been on building solid web applications, from task lists to full-fledged CRUD systems, with front-end, back-end, and database integration.

This will be my first contribution to the open-source ecosystem, and I am excited to learn and collaborate on innovative projects, particularly those involving Cairo

How I plan on tackling this issue

To enhance the user experience during test generation, I would start by adding an initial notice informing that the process might take some time, with a message like "Test generation takes time. Please be patient 🙏". Then, I would implement a feature that updates the waiting message every 5 seconds with fun phrases to keep the user engaged, using suggested messages.

[renzobanegass]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I'm Renzo, a Software Engineer with over 5 years of experience, I've been contributing to Web3 since last month and I'm a member of Dojo Coding, I'd love to help you with this issue to keep learning and improving, and help to grow Hylé

How I plan on tackling this issue

Add the Initial Disclaimer:
At the start of the proof generation flow, display a static message such as:
"Generating proofs takes quite a bit of time! Please be patient 🙏"

Create a List of Fun Messages:
I have some fun ideas for messages that could be displayed here, some related to pop culture and web3 culture like:

• "gm! Proofs are still being generated. Stay cozy."
• "Proofs: The gas fees of patience."
• "To infinity and beyond... but first, proofs!"
  and some more.

Set Up a Timer to Rotate Messages:
Use a setInterval function to change the message every 5~10 seconds. This will help keep the user engaged and informed.

Integrate with Proof Generation Process

• Start the message rotation when proof generation begins.
• Ensure the message rotation stops once the proof generation is complete by clearing the interval.

Testing

Submit a PR

Follow up on feedback

[EmmanuelAR]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Heyyy can i work on this? I Emmanuel Software dev from Costa Rica and Dojo Coding

How I plan on tackling this issue

1. Add the Disclaimer at the Beginning of the Flow

   • Identify the Start of the Proof Generation Flow: Locate the point in your code where the proof generation process begins, typically in the frontend of your application.
   • Insert the Disclaimer: Add a text element at the start of this flow with the message:
   • "Generating proofs takes quite a bit of time! Please be patient 🙏"

2. Implement the Rotating Waiting Messages

   • Create a List of Fun Messages: Define an array or list in your code with the following messages:
   • "Eternity is a long time, especially towards the end" - Groucho Marx
   • "Hang in there!"
   • "zk is the future, it's just taking its sweet time."
   • "It's been 84 years..."
   • "Did you know that 'esperar' in Spanish both means 'wait' and 'hope'?"
   • Set Up a Timer: Implement a timer that triggers every 5 seconds.
   • JavaScript Example: If you’re using JavaScript, you can use setInterval to change the message every 5 seconds.
   • Display the Messages: At the start of the flow, display the first message. Then, use the timer to cycle through the messages in the array, updating the displayed message every 5 seconds.

3. Ensure the User Interface Updates Smoothly

   • Test the Message Rotation: Ensure that the messages change smoothly without causing any jarring UI updates.
   • Handle Edge Cases: Make sure that if the proof generation finishes before all messages are shown, the UI transitions smoothly to the next step without abruptly cutting off a message.

4. Test the User Experience

   • Simulate Long Proof Generation: Test the process by simulating a long proof generation to see how the messages appear.
   • Get Feedback: If possible, get user feedback to ensure the waiting experience is improved by these changes.

5. Deploy and Monitor

   • Deploy the Changes: Once tested, deploy the changes to your production environment.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m willing to work on the "Add More Waiting Messages" feature. My name is Benjamin, and I aim to enhance the user experience during proof generation by incorporating engaging and informative waiting messages.

How I plan on tackling this issue

• Message Display: I will add a disclaimer at the beginning of the waiting period to inform users about the time required for proof generation. I will implement a message display system that updates the waiting message every 5 seconds.
• User Experience: The messages will be shown in a visually appealing manner that aligns with the existing UI/UX design.

Testing

• Functionality Testing: I will ensure that the disclaimer and periodic messages display correctly and update at the specified intervals.

[DiegoB1911]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Developer with two years of experience. I'm also an active member of Dojo Coding, where I'm expanding my skills in Cairo and Web3 technologies. This is my first time participating in an Open Development Hackathon, and I'm eager to learn, contribute, and be part of a new project.

How I plan on tackling this issue

To improve the user experience while they wait for proofs to be generated, I propose a two-part solution:

Disclaimer at the Start:
At the beginning of the proof generation flow, we will display a disclaimer that informs users about the potentially long wait time. The message could read: "Generating proofs takes quite a bit of time! Please be patient 🙏". This sets the right expectations upfront and helps prevent frustration.

Dynamic Waiting Messages:
To make the waiting period more engaging and less monotonous, we will implement a feature that displays fun, rotating messages every 5 seconds. These messages will offer a mix of humor and encouragement to keep the user entertained. Some examples include:

"Eternity is a long time, especially towards the end." - Groucho Marx
"Hang in there!"
"zk is the future, it's just taking its sweet time."
"It's been 84 years..."
"Did you know that 'esperar' in Spanish means both 'wait' and 'hope'?"
By integrating these features, we aim to make the waiting process more pleasant and less tedious, ultimately improving the overall user experience.

[mamicho16]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello my name is Mauricio, i'm a software developer and I have knowledge on different programming languagues and I have worked in different frontend projects, so I can handle this.

How I plan on tackling this issue

I would create an array with the messages and generate a message rotation system triggered every 5 seconds after the initial disclaimer. The system would loop through the messages and update the on-screen text by using a timer.

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Web Developer with a solid background in front-end and back-end development. So it will be a pleasure to contribute for the first time to this great project. I am a member of the Dojo Coding community.

How I plan on tackling this issue

1. Initial Disclaimer:

   • I would add a clear disclaimer at the start of the process to set the user's expectations about the time required to generate proofs.
   • The disclaimer will be displayed prominently at the beginning of the flow. For example:

     <div className="disclaimer">
       <p>Generating proofs takes quite a bit of time! Please be patient 🙏</p>
     </div>

2. Rotating Messages Implementation:

   • I would create an array of fun messages that will rotate every 5 seconds. These messages would be displayed in place of the loading spinner or any other waiting indication.
   • Example of the array of messages:

     const messages = [
       `"Eternity is a long time, especially towards the end." - Groucho Marx`,
       `"Hang in there!"`,
       `"zk is the future, it's just taking its sweet time."`,
       `"It's been 84 years..."`,
       `"Did you know that 'esperar' in Spanish both means 'wait' and 'hope'?"`
     ];

3. Message Rotation Logic:

   • I would implement a state in React to manage the current message being displayed. Using setInterval, I would rotate through the messages array every 5 seconds.
   • Example of how to implement the rotating messages:

     import { useState, useEffect } from 'react';
     
     function ProofGeneration() {
       const messages = [
         `"Eternity is a long time, especially towards the end." - Groucho Marx`,
         `"Hang in there!"`,
         `"zk is the future, it's just taking its sweet time."`,
         `"It's been 84 years..."`,
         `"Did you know that 'esperar' in Spanish both means 'wait' and 'hope'?"`
       ];
     
       const [currentMessage, setCurrentMessage] = useState(messages[0]);
       let messageIndex = 0;
     
       useEffect(() => {
         const interval = setInterval(() => {
           messageIndex = (messageIndex + 1) % messages.length;
           setCurrentMessage(messages[messageIndex]);
         }, 5000);
     
         return () => clearInterval(interval); // Cleanup on component unmount
       }, []);
     
       return (
         <div className="proof-generation">
           <p className="disclaimer">Generating proofs takes quite a bit of time! Please be patient 🙏</p>
           <div className="message">
             <p>{currentMessage}</p>
           </div>
         </div>
       );
     }

4. Styling and User Experience Considerations:

   • I would ensure that the messages are displayed in a visually appealing way that complements the existing design. This includes proper spacing, font size, and alignment to keep the focus on the messages without overwhelming the user.
   • Additionally, I might add subtle animations when switching between messages to make the experience smoother.

5. Testing and Feedback:

   • I would test the solution to ensure the messages rotate correctly and there are no issues with the timing or display. This involves checking various screen sizes and ensuring the messages remain readable.
   • If possible, I would gather user feedback on the new messages to see if they help improve the experience during the waiting period and make adjustments as needed.

6. Documentation:

   • I would document the implementation, including the logic behind the message rotation and any configurations for the timing or messages themselves. This will help future developers understand the purpose and functionality of the feature.

7. Integration:

   • I would integrate the new loading experience into the existing proof generation flow, ensuring it fits seamlessly with the current user interface and doesn't disrupt any other elements of the process.

[SoarinSkySagar]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am an experienced full stack web developer with 2 years of experience in developing dapps. I have experience with tech stacks such as Next.js, Reacts.js, TailwindCSS, Redux and Zustand for frontend development. It will be a fun issue to work with.

How I plan on tackling this issue

Hi @s0lness, to reolve this issue, I would:

1. Create a new state variable isLoading with type boolean and default value false for keeping track of whether the component has been loaded.
2. Create an array of strings having the quotes, with 0th element being the string "Generating proofs takes quite a bit of time! Please be patient 🙏".
3. if isLoading === true, trigger a function that will change waiting message after every 5 seconds.
4. if isLoading === false, disable the function.
5. Inside the function also, add conditional checking so the waiting message is changed only when requirements are met (here, when isLoading === true becomes true).
6. When the isLoading variable is true, a waiting component will be rendered which will display the current quote.
7. The function to change the quote every 5 seconds simply shifts the current quote pointer in the quote array to a random one other that that. For eg., if the current quote element is quotes[2], then after 5 seconds it becomes quotes[6] (id is random). The default value of the pointer will be 0 at beginning, and quote[0] will be the string "Generating proofs takes quite a bit of time! Please be patient 🙏".

These were the steps I would take to resolve this issue. Additionally, I will also:

1. Ensure adding comments to explain what the following lines of code do.
2. Keep code clean, error free and readable.
3. Check for any error occurring due to my code, and fix them all before PR.
4. Modifying the documentation, if required for this issue.

[CollinsC1O]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @s0lness I will love to work on this issue