created a separate component for loading spinner

Author: Ishan Veer

users/discord/components/LoadingSpinner.js

@@ -0,0 +1,7 @@
+const { createElement } = react;
+
+export const LoadingSpinner = () => {
+  return createElement('aside', { class: 'users_section' }, [
+    createElement('div', { class: 'loading' }, ['Loading...']),
+  ]);
+};

users/discord/components/UsersSection.js

@@ -1,4 +1,5 @@
 const { createElement } = react;
+import { LoadingSpinner } from './LoadingSpinner.js';
 
 export const UsersSection = ({
   users,
@@ -20,9 +21,7 @@ export const UsersSection = ({
   );
 
   if (isLoading) {
-    return createElement('aside', { class: 'users_section' }, [
-      createElement('div', { class: 'loading' }, ['Loading...']),
-    ]);
+    return LoadingSpinner();
   }
 
   return createElement(
@@ -45,13 +44,6 @@ export const UsersSection = ({
             src: user?.picture?.url ?? dummyPicture,
             class: 'user_image',
           }),
-          /* will uncomment this once we have actual paginated data from the API  */
-
-          // createElement('span', {}, [
-          //   user.first_name + ' ' + user.last_name + user.username,
-          // ]),
-
-          /* will remove this once we have actual paginated data from the API  */
           createElement('span', {}, [user.username]),
         ],
       );