added LazyLoadingErrorBoundary for wrapping suspense case, added lice…

…nse info if missing, cleaned up unnecessary parts

cra-device-class-aware-loading/src/components/LazyLoadingErrorBoundary/index.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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 React from 'react';
+
+/*** Adapted from https://reactjs.org/docs/error-boundaries.html ***/
+export default class LazyLoadingErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <button onClick={() => window.location.reload()}>Click to Reload</button>
+          <p>Lazy-loading failed!</p>
+        </div>
+      );
+    }
+
+    return this.props.children; 
+  }
+}

cra-device-class-aware-loading/src/components/Product/index.js

@@ -16,6 +16,7 @@
 
 import React, { lazy, Suspense, Fragment } from 'react';
 
+import LazyLoadingErrorBoundary from '../LazyLoadingErrorBoundary';
 import { useDeviceParams } from '../../utils/hooks';
 import { Multicore_Score_Threshold } from '../../config';
 
@@ -49,13 +50,15 @@ const Product = ({ imageUrl, ...rest }) => {
         unsupportMessage={unsupportMessage}
         modelName={name}
         multicoreScore={multicore_score} />
-      <Suspense fallback={Loading}>
-        { multicore_score > Multicore_Score_Threshold || unsupportMessage ? (
-          <LazyHeavy imageUrl={imageUrl} {...rest} />
-        ) : (
-          <LazyLight imageUrl={imageUrl} {...rest} />
-        ) }
-      </Suspense>
+      <LazyLoadingErrorBoundary>
+        <Suspense fallback={Loading}>
+          { multicore_score > Multicore_Score_Threshold || unsupportMessage ? (
+            <LazyHeavy imageUrl={imageUrl} {...rest} />
+          ) : (
+            <LazyLight imageUrl={imageUrl} {...rest} />
+          ) }
+        </Suspense>
+      </LazyLoadingErrorBoundary>
     </Fragment>
   );
 };

cra-device-class-aware-loading/src/serviceWorker.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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.
+ */
+
 // This optional code is used to register a service worker.
 // register() is not called by default.
 

cra-memory-considerate-loading-sketchfab/src/App.css

@@ -18,12 +18,6 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -34,16 +28,3 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

cra-memory-considerate-loading-sketchfab/src/App.test.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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 React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

cra-memory-considerate-loading-sketchfab/src/components/LazyLoadingErrorBoundary/index.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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 React from 'react';
+
+/*** Adapted from https://reactjs.org/docs/error-boundaries.html ***/
+export default class LazyLoadingErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <button onClick={() => window.location.reload()}>Click to Reload</button>
+          <p>Lazy-loading failed!</p>
+        </div>
+      );
+    }
+
+    return this.props.children; 
+  }
+}

cra-memory-considerate-loading-sketchfab/src/components/ModelViewer/index.js

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import React, { Fragment, Suspense, lazy } from 'react';
+import React, { Suspense, lazy } from 'react';
 
 import Loading from '../Loading';
+import LazyLoadingErrorBoundary from '../LazyLoadingErrorBoundary';
 
 const SketchFabEmbed = lazy(() => import('./SketchFabEmbed'));
 const LazyModelImageViewer = lazy(() => import('./ModelImageViewer'));
@@ -25,19 +26,17 @@ const ModelViewer = ({ model, fallbackSrc, memoryStatus }) => {
   const { overLoad } = memoryStatus;
 
   const viewer = overLoad ? (
-    <Suspense fallback={<Loading />}>
-      <LazyModelImageViewer src={fallbackSrc} />
-    </Suspense>
+    <LazyModelImageViewer src={fallbackSrc} />
   ) : (
-    <Suspense fallback={<Loading />}>
-      <SketchFabEmbed model={model} />
-    </Suspense>
+    <SketchFabEmbed model={model} />
   );
 
   return (
-    <Fragment>
-      {viewer}
-    </Fragment>
+    <LazyLoadingErrorBoundary>
+      <Suspense fallback={<Loading />}>
+        {viewer}
+      </Suspense>
+    </LazyLoadingErrorBoundary>
   );
 };
 

cra-memory-considerate-loading-sketchfab/src/serviceWorker.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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.
+ */
+
 // This optional code is used to register a service worker.
 // register() is not called by default.
 

cra-memory-considerate-loading/src/App.css

@@ -18,12 +18,6 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -34,16 +28,3 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

cra-memory-considerate-loading/src/App.test.js

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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 React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';

cra-memory-considerate-loading/src/components/LazyLoadingErrorBoundary/index.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2019 Google LLC
+ *
+ * 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
+ *
+ *     https://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 React from 'react';
+
+/*** Adapted from https://reactjs.org/docs/error-boundaries.html ***/
+export default class LazyLoadingErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {hasError: false};
+  }
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div>
+          <button onClick={() => window.location.reload()}>Click to Reload</button>
+          <p>Lazy-loading failed!</p>
+        </div>
+      );
+    }
+
+    return this.props.children; 
+  }
+}

cra-memory-considerate-loading/src/components/ModelViewer/index.js

@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import React, { Fragment, Suspense, lazy } from 'react';
+import React, { Suspense, lazy } from 'react';
 
 import Loading from '../Loading';
+import LazyLoadingErrorBoundary from '../LazyLoadingErrorBoundary';
 
 const LazyModel3DViewer = lazy(() => import('./Model3DViewer'));
 const LazyModelImageViewer = lazy(() => import('./ModelImageViewer'));
@@ -25,19 +26,17 @@ const ModelViewer = ({ src, fallbackSrc, memoryStatus }) => {
   const { overLoad } = memoryStatus;
 
   const viewer = overLoad ? (
-    <Suspense fallback={<Loading />}>
-      <LazyModelImageViewer src={fallbackSrc} />
-    </Suspense>
+    <LazyModelImageViewer src={fallbackSrc} />
   ) : (
-    <Suspense fallback={<Loading />}>
-      <LazyModel3DViewer src={src} />
-    </Suspense>
+    <LazyModel3DViewer src={src} />
   );
 
   return (
-    <Fragment>
+    <LazyLoadingErrorBoundary>
+      <Suspense fallback={<Loading />}>
       {viewer}
-    </Fragment>
+      </Suspense>
+    </LazyLoadingErrorBoundary>
   );
 };