feat(app-builder): app loading update (#188)

- fixes: visible app with error until the source code is fully loaded
- updates: loading animation style according to the design

Signed-off-by: Petr Kadlec <[email protected]>

src/modules/api-keys/api/useApiKeys.ts

@@ -1,3 +1,19 @@
+/**
+ * Copyright 2025 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { ApiKeysListQuery } from '@/app/api/api-keys/types';
 import { useQuery } from '@tanstack/react-query';
 import { useApiKeysQueries } from './queries';

src/modules/api-keys/api/useCreateApiKey.ts

@@ -1,3 +1,19 @@
+/**
+ * Copyright 2025 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { createApiKey } from '@/app/api/api-keys';
 import { ApiKey, ApiKeysCreateBody } from '@/app/api/api-keys/types';
 import { useAppContext } from '@/layout/providers/AppProvider';

src/modules/apps/builder/ArtifactSharedIframe.module.scss

@@ -16,6 +16,8 @@
 
 @use 'styles/common' as *;
 
+$loading-size: rem(170px);
+
 .root {
   position: relative;
   background-color: $layer-02;
@@ -24,9 +26,42 @@
   justify-content: center;
   align-items: center;
   z-index: 1;
+}
+.loading {
+  position: absolute;
+  inset: 0;
+  &.empty {
+    background-color: $layer-02;
+  }
 
   :global(.#{$prefix}--loading-overlay) {
     position: absolute;
+
+    :global(.#{$prefix}--loading) {
+      block-size: $loading-size;
+      inline-size: $loading-size;
+
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        block-size: $loading-size;
+        inline-size: $loading-size;
+        border-radius: 50%;
+        border: 19px solid $background-active;
+      }
+
+      svg {
+        circle {
+          stroke-width: 11;
+          stroke-dasharray: 150, 260;
+          stroke-dashoffset: 40;
+          r: 44;
+        }
+      }
+    }
   }
 }
 .app {

src/modules/apps/builder/ArtifactSharedIframe.tsx

@@ -43,6 +43,7 @@ export function ArtifactSharedIframe({
 }: Props) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [state, setState] = useState<State>(State.LOADING);
+  const appliedCodeRef = useRef<string | null>(null);
   const { appliedTheme: theme } = useTheme();
   const { project, organization } = useAppContext();
   const [iframeLoadCount, setIframeLoadCount] = useState<number>(0);
@@ -61,6 +62,8 @@ export function ArtifactSharedIframe({
   useEffect(() => {
     if (isPending) return;
 
+    appliedCodeRef.current = sourceCode;
+
     postMessage({
       type: PostMessageType.UPDATE_STATE,
       stateChange: {
@@ -166,7 +169,15 @@ export function ArtifactSharedIframe({
           <AppPlaceholder />
         </div>
       ) : (
-        (state === State.LOADING || isPending) && <Loading />
+        (state === State.LOADING || isPending) && (
+          <div
+            className={clsx(classes.loading, {
+              [classes.empty]: !appliedCodeRef.current,
+            })}
+          >
+            <Loading />
+          </div>
+        )
       )}
     </div>
   );