adrianvrj commented 3 weeks ago

Is your feature request related to a problem? Please describe. Currently the app is taking some time to retrieve the data from the blockchain but this is not very clear on the UI, we need a loading animation for when this happens

Describe the solution you'd like A simple loading animation component, without any text and with a light grey color. Do not implement this component anywhere just add the necessary code.

sajalbnl commented 3 weeks ago

May I take care of this?

Snehagupta1907 commented 3 weeks ago

I'd be happy to do this.

KevinLatino commented 3 weeks ago

Hello adrianvrj,

I am Kevin Latino,

I am a Frontend Dev and I Dojo Coding Member ⛩️

I will complete this issue in 3 hours.

To solve the loading delay issue, I’d either create a custom spinner with a light grey color using CSS or Tailwind for simplicity and flexibility, or use a library like Chakra UI to leverage its pre-built loading components. Both approaches would improve the user experience by clearly indicating data loading without overwhelming the UI.

Here is an example of a loading spinner that i made in other project:

const LoadingSpinner = () => {
  return (
    <div className="flex justify-center items-center h-full">
      <div className="w-12 h-12 border-4 border-gray-300 border-t-transparent rounded-full animate-spin"></div>
    </div>
  );
};

sasasamaes commented 3 weeks ago

I'd like to handle this task. It would be nice to design a spinner according to the brand

import React from 'react';
import './LoadingAnimation.css';

const LoadingAnimation = () => {
    return (
        <div className="loading-spinner"></div>
    );
};

export default LoadingAnimation;


.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid lightgrey;
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}```

jimenezz22 commented 3 weeks ago

Gm sir, here Luis from Dojo Coding My idea to solve the issue is to add a Loading Spinner component with a loading animation using Tailwind to visually indicate the loading of data without additional text.

DiegoB1911 commented 3 weeks ago

I'm a Full Stack Developer with two years of experience, primarily in Next.js, and I'm also a member of Dojo Coding.

To address the issue I would:

Identify the Loading State: Add a loading state (isLoading) in the relevant part of the code where the app fetches blockchain data. Set this state to true when the request begins and false once the data is received.
Trigger the Animation: Use the isLoading state to conditionally display a loading animation in the UI whenever data is being retrieved.
Add the Loading Animation Code: Implement the plain code for a simple loading animation, without creating a separate component, for a lightweight solution.
Test and Document: Verify the functionality to ensure smooth transitions and document the code for clarity and future reference.

Benjtalkshow commented 3 weeks ago

I can take care of this issue My ETA is 5hrs.

martinvibes commented 3 weeks ago

holla @adrianvrj I’d like to work on this. and this will be my first time contributing to this project if i'm assigned

i'm a frontend developerand i will like to tackle this issue

i have done something like this for projects that is now merged please kindly assign :)

ETA: <=12HRS

Kaminar-i commented 3 weeks ago

I'd like to take this issue. i'm an experienced developer and i would love to work on this issue

Yunusabdul38 commented 3 weeks ago

Hello @adrianvrj i can help to work on a perfect animation/loading state for this issue, can I work on this issue!

MariangelaNM commented 3 weeks ago

Hello, I would like to contribute to your project again.

Steps to Solve This:

1. Define Requirements

Choose a circular spinner design with a light grey color and smooth rotation, no text.

2. Create the Component

Create a new component named LoadingAnimation.

3. Add Spinner Markup and Styles

Style it with a circular shape, light grey color, and rotation animation.

4. Test and Document

Akshola00 commented 3 weeks ago

I'd love to work on this feature @adrianvrj ! I will review the codebase to understand the existing structure and pattern. Then, I'll identify the appropriate location to add the code, ensuring the code integrates smoothly with the current project. My approach will be to implement a clean and efficient solution.

Please assign this issue to me I would love to contribute to this project!

JosueBrenes commented 3 weeks ago

Hi, I'm Josué Brenes and I'll be working on issue. I'm Dojo Coding member. ⛩️

I estimate this will take 1 day to complete.

How to Address This Request

To address this request, we can create a simple loading spinner component in React that meets the specifications outlined in the GitHub issue.

Loading Spinner Component Code

import React from 'react';

const LoadingSpinner: React.FC = () => {
  return (
    <div style={styles.spinner}></div>
  );
};

const styles = {
  spinner: {
    width: '40px',
    height: '40px',
    border: '4px solid lightgrey',
    borderTop: '4px solid transparent',
    borderRadius: '50%',
    animation: 'spin 1s linear infinite',
  } as React.CSSProperties,
};

// Add CSS animation in the same file or in a separate CSS file
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(`
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
`, styleSheet.cssRules.length);

export default LoadingSpinner;

Explanation

Component LoadingSpinner: This component renders a styled div to resemble a loading spinner.
Inline Styling: Uses a light grey border with a transparent top border for a spinning effect.
CSS Animation: The spin animation continuously rotates the div to create a loading animation.

godspowerufot commented 3 weeks ago

May I handle this issue? i am always keen to develop beautiful loading animation applying the skeleton approach where user are expecting an information to be render on a screen .Making it simple and unique is the best approach and i hope to be call upon to be able to contribute to this . thank you

Michaelkingsdev commented 3 weeks ago

Would like to work on this issue. it would be my first time contributing to this project. Thanks