Merge branch 'reactplay:main' into main

.all-contributorsrc

@@ -319,6 +319,24 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "ammaaraslam",
+ "name": "Ammaar Aslam",
+ "avatar_url": "https://avatars.githubusercontent.com/u/96367405?v=4",
+ "profile": "https://github.com/ammaaraslam",
+ "contributions": [
+ "code"
+ ]
+ },
+ {
+ "login": "mayukh551",
+ "name": "Mayukh Bhowmick",
+ "avatar_url": "https://avatars.githubusercontent.com/u/82811112?v=4",
+ "profile": "https://github.com/mayukh551",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

README.md

@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-35-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-37-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -63,7 +63,7 @@ Please support the work by giving the repository a ⭐, contributing to it, and/
 
 You may want to set up the `react-play` repo for the following reasons:
 
-- You want to create a new play or want to edit an existing play as a contributor. Please check the [Create a Play Guide](./CREATE-PLAY.md) for more details. Also, please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
+- You want to create a new play (A play is a React project) or want to edit an existing play as a contributor. Please check the [Create a Play Guide](./CREATE-PLAY.md) for more details. Also, please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
 
 - You want to contribute to the `react-play` repo in general. Please check the [Contribution Guide](./CONTRIBUTING.md) to get started.
 
@@ -238,6 +238,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="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/harshsinghatz"><img src="https://avatars.githubusercontent.com/u/51085015?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Harsh Singh</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=harshsinghatz" title="Code">💻</a></td>
  <td align="center"><a href="http:https://frankiefab.com"><img src="https://avatars.githubusercontent.com/u/46662771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Franklin U.O. Ohaegbulam</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=frankiefab100" title="Code">💻</a></td>
  </tr>
+ <tr>
+ <td align="center"><a href="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/ammaaraslam"><img src="https://avatars.githubusercontent.com/u/96367405?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ammaar Aslam</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=ammaaraslam" title="Code">💻</a></td>
+ <td align="center"><a href="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/mayukh551"><img src="https://avatars.githubusercontent.com/u/82811112?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mayukh Bhowmick</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=mayukh551" title="Code">💻</a></td>
+ </tr>
 </table>
 
 <!-- markdownlint-restore -->

src/common/home/Home.jsx

@@ -36,7 +36,7 @@ const Home = () => {
  });
  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
- //* array of tweet IDs to show on the home page
+ // array of tweet IDs to show on the home page
  const tweetIdArray = [
  "1544376341172068352", 
  "1530197614771458049",
@@ -50,16 +50,11 @@ const Home = () => {
  "1532349503709122561"
  ]
 
- //* set the state for loading
-
+ // set the state for loading
  const [isTweetsLoading,setTweetsLoading] = useState(true)
 
-
-
- function tweetLoadHandler (){
- //* as soon as tweets loads on DOM disable the loading spinner
- setTweetsLoading(false)
- }
+ // Function to handle the tweets loading state after tweets have been loaded.
+ const tweetLoadHandler = () => setTweetsLoading(false)
 
 
  return (
@@ -171,20 +166,24 @@ const Home = () => {
  </strong> Says!
  </h3>
 
- {
- (isTweetsLoading) ? <Spinner/> :""
- }
- <div className="tweets-container active" >
- {
-
- tweetIdArray.map(id=> {
-
- return <Tweet key={id} tweetId={id}
- onLoad={tweetLoadHandler} options={{width:'410' ,conversation:"none",cards:"hidden",align:"center"}} />
- })
- }
+ {isTweetsLoading && (
+ <Spinner />
+ )}
+ <div className={isTweetsLoading ? "tweets-container" : "tweets-container active"}>
+ {tweetIdArray.map((id) => (
+ <Tweet
+ key={id}
+ tweetId={id}
+ onLoad={tweetLoadHandler}
+ options={{
+ width: "410",
+ conversation: "none",
+ cards: "hidden",
+ align: "center",
+ }}
+ />
+ ))}
  </div>
-
  </section>
  <section className="home-contributors">
  <Contributors />