Add time based logic docs

Author: PoojaB26

docs/resources/control-flow/time-based-logic/imgs/periodic-action.png

@@ -0,0 +1,59 @@
+---
+title: Periodic [Action]
+sidebar_position: 3
+---
+
+# Periodic Action
+
+Periodic execution of logic refers to running a specific block of code or a set of actions at
+regular, defined intervals. This is useful for tasks that need to be repeated continuously or at
+specific time intervals.
+
+## Use-cases
+
+- For tasks that need regular updates, such as fetching data from a server, monitoring system
+  health, or updating a user interface.
+- In scenarios where periodic checks or maintenance tasks are required (e.g., cleaning up
+  temporary files, sending periodic notifications).
+- Implementing polling mechanisms for checking changes in state or data.
+
+## Start Periodic Action
+
+To create a periodic action workflow, add the **Start Periodic Action** action either on the **On
+Page Load** action trigger of your page or on any widget that should start the periodic action.
+
+The properties of the Periodic Action look like this:
+
+![periodic-action.png](imgs%2Fperiodic-action.png)
+
+## Stop Periodic Action
+
+You can call the **Stop Periodic Action** action from anywhere on the page or component to stop
+one or multiple
+periodic actions.
+
+:::danger[Dont forget to stop the Periodic Actions]
+Stopping a periodic action is crucial to prevent unnecessary resource consumption and potential
+performance issues. It ensures that tasks do not continue running in the background when they are no
+longer needed, which can help maintain the efficiency and responsiveness of your application.
+:::
+
+### Periodic Action vs Timer
+
+| Feature     | Timer Widget                                                                                                    | Periodic Action                                                         |
+|-------------|-----------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------|
+| **Purpose** | Used for single or non-repetitive timing events, often within user interfaces.                                  | Used for repetitive tasks that need to run at regular intervals.        |
+| **Usage**   | To set a countdown timer, start/stop actions based on user input, or trigger actions after a specific duration. | For background tasks, monitoring, regular updates, and periodic checks. |
+| **Example** | Countdown timer in a quiz application.                                                                          | Fetching new messages from a server every 5 minutes.                    |
+
+
+### Periodic Actions vs Loops
+
+| Feature                   | Periodic Actions                                                           | Loops                                                                  |
+|---------------------------|-----------------------------------------------------------------------------|------------------------------------------------------------------------|
+| **Purpose**               | To execute a task at regular, defined intervals.                            | To execute a task repeatedly until a condition is met.                 |
+| **Execution Frequency**   | Executes at specified time intervals (e.g., every 60 seconds).              | Executes continuously until the loop condition is false.               |
+| **Use Case**              | Suitable for tasks needing regular updates, such as fetching new data.      | Suitable for tasks requiring iteration over collections or repeated checks. |
+| **Control**               | Can be started and stopped easily, allowing for controlled execution.       | Runs until a break condition is met or the loop is explicitly stopped. |
+| **Resource Management**   | Efficient, as it allows idle time between executions.                       | Can be resource-intensive if not managed properly, as it runs continuously. |
+| **Examples**              | Fetching new offers from a server every 5 minutes.                          | Iterating over a list of items to process them one by one.             |

docs/resources/control-flow/time-based-logic/imgs/timer-control.png

@@ -0,0 +1,58 @@
+---
+title: Timer [Widget]
+sidebar_position: 2
+---
+
+**Timer [Widget]** allows developers to create countdown or count-up timers within your page. It is
+particularly useful in scenarios where timing is crucial, such as quizzes, auctions, workout apps,
+and various time-sensitive activities.
+
+## Use Cases
+
+- **Quizzes and Exams:** Enforcing time limits for answering questions.
+- **Auctions:** Displaying the remaining time for bids.
+- **Workouts:** Timing exercises and rest periods.
+- **Events:** Counting down to the start or end of an event.
+- **Productivity:** Using Pomodoro timers to manage work sessions and breaks.
+
+## Timer Types
+
+- **Countdown Timer:** Counts down from a specified time to zero, often used in scenarios where a
+  task or event needs to be completed within a set period.
+
+- **Count-up Timer:** Counts up from zero to a specified time or indefinitely, useful for tracking
+  the duration of an event or activity.
+
+On adding the Timer widget to your page, you can specify the type of timer and other properties
+as mentioned here:
+
+![timer-widget.png](imgs%2Ftimer-widget.png)
+
+## On Timer End [Action Trigger]
+
+You can also specify a flow of actions when the timer ends. You can find this Action Trigger on
+clicking the Action Flow Editor on the Timer widget.
+
+![timer-widget-action.png](imgs%2Ftimer-widget-action.png)
+
+## Controlling the Timer
+
+You can control the timer from anywhere on the page. Using any widget's Action Flow Editor, you can perform the following actions:
+
+- **Start Timer:** This starts the timer. If the timer is already started, triggering this type
+  won't
+  have any effect.
+
+- **Stop Timer:** This stops the timer. This will have effect only if the timer is started.
+
+- **Reset Timer:** This resets the timer and brings it to the initial state.
+
+![timer-control.png](imgs%2Ftimer-control.png)
+
+## Periodic Action vs Timer
+
+| Feature            | Timer Widget                                                                                       | Periodic Action                                                   |
+|--------------------|----------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
+| **Purpose**        | Used for single or non-repetitive timing events, often within user interfaces.                      | Used for repetitive tasks that need to run at regular intervals.  |
+| **Usage**          | To set a countdown timer, start/stop actions based on user input, or trigger actions after a specific duration. | For background tasks, monitoring, regular updates, and periodic checks. |
+| **Example**        | Countdown timer in a quiz application.                                                             | Fetching new messages from a server every 5 minutes.              |

docs/resources/control-flow/time-based-logic/imgs/timer-widget-action.png

@@ -0,0 +1,49 @@
+---
+title: Wait [Action]
+sidebar_position: 1
+---
+
+# Wait [Action]
+
+**"Waiting"** on an action or function is a fundamental concept in time-based logic, allowing developers to introduce intentional pauses within a sequence of actions. This is also known as delaying execution of logic, where the execution of a sequence of actions is paused for a specified period. This action is particularly useful when there is a need to synchronize events, manage the timing of operations, or ensure that certain conditions are met before proceeding further in a workflow.
+
+## Delayed Execution of Logic
+Delaying execution of logic involves pausing the execution of a sequence of actions for a specified period. This is useful when you need to introduce a time delay before proceeding to the next step in a workflow or process.
+
+## Use-cases
+
+- When you need to wait for a certain condition to be met (e.g., waiting for data to load or a 
+user to complete an action).
+- To create pauses between actions for better user experience (e.g., displaying messages 
+  sequentially).
+- Waiting before performing an animation. 
+
+## How to?
+
+To implement a Wait Action in your Action Flows, follow this simple tutorial: 
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'
+}}>
+    <iframe 
+        src="https://demo.arcade.software/ou0tecrBVViOqy74U9nE?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>