feat: implemented loading and success states for createprojectmodal form (#300)

Co-authored-by: Shadow-MMN <nnajimakuochukwu4@example.com>

Author: Shadow-MMN

components/landing-page/project/CreateProjectModal/LoadingScreen.tsx

@@ -0,0 +1,29 @@
+'use client';
+import { motion } from 'framer-motion';
+
+const LoadingScreen = () => {
+  return (
+    <div className='flex h-screen w-screen items-center justify-center bg-[#030303]'>
+      <div className='flex items-center gap-2'>
+        {[...Array(3)].map((_, index) => (
+          <motion.div
+            key={index}
+            className='h-[9.85px] w-[9.85px] rounded-full bg-[#A7F95014]' // 🔥 use background color
+            animate={{
+              backgroundColor: ['#A7F95014', '#A7F950', '#A7F95014'],
+              height: ['9.85px', '39.38px', '9.85px'],
+            }}
+            transition={{
+              duration: 1,
+              ease: 'easeInOut',
+              repeat: Infinity,
+              delay: index * 0.2, // ✅ use delay instead of repeatDelay
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LoadingScreen;

components/landing-page/project/CreateProjectModal/SuccessScreen.tsx

@@ -0,0 +1,32 @@
+import { BoundlessButton } from '@/components/buttons';
+import Image from 'next/image';
+
+const SuccessScreen = ({ onContinue }: { onContinue: () => void }) => {
+  return (
+    <div className='flex h-screen w-screen items-center justify-center bg-[#030303] px-10'>
+      <div className='mx-auto flex max-w-[400px] flex-col items-center gap-10'>
+        <Image
+          src='/Success@4x.png'
+          alt='Green good mark'
+          width={120}
+          height={120}
+          className='max-h-[150px] max-w-[150px]'
+        />
+        <div className='flex flex-col gap-3 text-center text-white'>
+          <h2 className='text-[20px] font-medium'>Submission Successful!</h2>
+          <p>
+            Your project has been sent for admin review and will be processed
+            within 72 hours. You can track its status anytime on the{' '}
+            <span className='font-medium text-[#A7F950] underline'>
+              Projects Page
+            </span>
+          </p>
+        </div>
+
+        <BoundlessButton onClick={onContinue}>Continue</BoundlessButton>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessScreen;

components/landing-page/project/CreateProjectModal/index.tsx

@@ -7,6 +7,8 @@ import Details from './Details';
 import Milestones from './Milestones';
 import Team from './Team';
 import Contact from './Contact';
+import LoadingScreen from './LoadingScreen';
+import SuccessScreen from './SuccessScreen';
 
 const CreateProjectModal = ({
   open,
@@ -16,6 +18,8 @@ const CreateProjectModal = ({
   setOpen: (open: boolean) => void;
 }) => {
   const [currentStep, setCurrentStep] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
 
   const handleBack = () => {
     if (currentStep > 1) {
@@ -24,19 +28,37 @@ const CreateProjectModal = ({
   };
 
   const handleContinue = () => {
+    if (showSuccess) return; // prevent clicks when success is showing
+
     if (currentStep < 5) {
-      setCurrentStep(currentStep + 1);
+      setIsLoading(true);
+      setTimeout(() => {
+        setCurrentStep(prev => prev + 1);
+        setIsLoading(false);
+      }, 1000);
     } else {
-      // Handle final submission
-      // TODO: Implement project submission logic
-      // This could include API calls, form validation, etc.
+      // ✅ After final step, show success screen
+      setShowSuccess(true);
     }
   };
 
-  // Placeholder for step validation - you can implement actual validation logic here
+  const handleReset = () => {
+    // reset all states to start fresh
+    setShowSuccess(false);
+    setCurrentStep(1);
+    setIsLoading(false);
+  };
+
   const isStepValid = true;
 
   const renderStepContent = () => {
+    if (isLoading) {
+      return <LoadingScreen />;
+    }
+    if (showSuccess) {
+      return <SuccessScreen onContinue={handleReset} />;
+    }
+
     switch (currentStep) {
       case 1:
         return <Basic />;
@@ -59,15 +81,19 @@ const CreateProjectModal = ({
       open={open}
       setOpen={setOpen}
     >
-      <Header currentStep={currentStep} onBack={handleBack} />
+      {!showSuccess && <Header currentStep={currentStep} onBack={handleBack} />}
+
       <div className='min-h-[calc(55vh)] px-4 md:px-[50px] lg:px-[75px] xl:px-[150px]'>
         {renderStepContent()}
       </div>
-      <Footer
-        currentStep={currentStep}
-        onContinue={handleContinue}
-        isStepValid={isStepValid}
-      />
+
+      {!showSuccess && (
+        <Footer
+          currentStep={currentStep}
+          onContinue={handleContinue}
+          isStepValid={isStepValid}
+        />
+      )}
     </BoundlessSheet>
   );
 };